/* 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;
}
}
Justify menu drop down to keep on screen?
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