[Michael]

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?

[Skandha]

@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

[Michael]

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?

[Skandha]

@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

[Michael]

Yes that worked! Thank you 🙂

[Skandha]

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

Kind Regards,
Skandha

[Author]

Posts