Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #284933
    Michael
    Participant

    Please have a look at my website

    https://www.gayundah.info/

    The dropdown menu has been partly customised (following code you provided) but there is one issue, which I think is nothing to do with those changes.

    The drop down work fine for most of the menu however the first drop down item (Home) has a child (News)

    Because of the width of the drop down bar, and the fact it is left justified, the word news can’t be seen at certain resolutions / levels of zoom.

    Is it possible to fix this please?
    Perhaps there is a way to add css to size that drop dpwn column to its content?

    The following is the menu related code in the ‘additional css’ section

    
    /* Menu item Hover & Active Text Color */
    .site-navigation li a:hover,
    .site-navigation li a:focus,
    .site-navigation .current_page_item > a,
    .site-navigation .current_page_item > a {
        color: #ff8000;
    }
    
    @media screen and (min-width: 64em) {
    	/* Menu Background Color */
    	.site-primary-menu,
    	.site-navigation ul ul,
    	.site-navigation ul ul li,
    	.search-container {
    		background-color: #000;
    	}
    	/* Menu Text Color */
    	.site-navigation a,
    	.social-navigation a, 
    	.menu-search-main-toggle {
    	    color: #fff;
    	}
    
    	/* Sub-menu Border and Color */
    	.site-navigation .menu-item-has-children > ul,
    	.site-navigation .page_item_has_children > ul {
    		border-top: 3px solid #ff8000;
    	}
    }
    

    I have screenshots if necessary but seems no way to attach files?

    #284947
    Skandha
    Participant

    @landyvlad: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .site-navigation .primary-menu ul {
        text-align: right;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #285239
    Michael
    Participant

    That does work BUT I don’t want all the menus right justified – I don’t like the look.

    It would be better if

    1. The drop down columns could be sized to fit the text.

    2. The text in just one column (in this case the home drop down) could be right justified, without affecting other columns.

    Is there a way of doing these things please?

    #285255
    Skandha
    Participant

    @landyvlad: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (min-width: 1024px) {
        #menu-item-135 .sub-menu li {
            width: 100px;
        }    
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #285362
    Michael
    Participant

    Yes that worked! Thank you 🙂

    #285374
    Skandha
    Participant

    @landyvlad: Glad the issue is resolved. Have a good day! 🙂

    Kind Regards,
    Skandha

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Justify menu drop down to keep on screen?’ is closed to new replies.