Docs

[Natalie]

Hello I am using the renew stack and would like to make the menu a bit more customized than options allow. I’ve tried a couple options I saw on other topics, but can’t work it out completely.

This is the site: wle-mekong-staging.waterandfood.org
I’ve gotten the sub-headers font to change and the lines between menu items to disappear, but what I really want to do is three things with the sub-menu:
1. Make the sub-menu drop-down box semi-transparent
2. give this drop-down box rounded corners
3. make the width of the box shorter, ie. only as long as the longest item (at least for the “about” menu item where the sub-menu box is far too long
Is this possible? I’ve tried a few different css codes for the semi-transparency and can’t get it to work. For the other two, I don’t know where to start.

Thank you!

[Christian]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS

.masthead-inline .x-navbar .desktop .sub-menu {
    background-color: rgba(255,255,255,0.9) !important;
    border-radius: 10px;
    min-width: 50px;
}

Hope that helps. 🙂

[Natalie]

Hi Christian,

Thank you! Almost perfect, only problem is that now the tertiary menu items do not have enough space, specifically the Resources->Publications-> sub-items go over the box. Is there a way to give more space to these tertiary items? I tried to do it individually for the publications item with this code:

.x-navbar .x-nav .sub-menu > #menu-item-427.menu-item > a {
min-width: 120px !important;
}

but that did not work unfortunately.

Would appreciate help!

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    width: 230px;
}

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu
.sub-menu {
    left: -100px!important;
    top: 60px;
    width: 380px;

}

I also included an adjustment for the 4th level submenu.

Hope this helps – thanks!

[Natalie]

Hi, thank you, this worked very well.

Just noticed however now that the mobile/hamburger drop-down menu has also inherited the white text color, rendering it invisible. I tried to change it using this code:

.x-navbar .mobile .x-nav-wrap .x-nav > li > a{color:rgba(243,111,33,0.9)!important;}

but that doesn’t appear to touch it. Can you tell me what to change?

thank you

[Christian]

Please add the code below in your Appearance > Customize > Custom > CSS

.x-navbar .x-nav-wrap.mobile .x-nav li a {
    color: #F36F21 !important;
}

Hope that helps. 🙂

[Author]

Posts