Menu sub-item design

[nelliegarcia]

Hello! I would like to modify the design of the menu sub-items. I’d need it to have a white background whereas the main items should keep their transparent background. Here is the website: https://www.ellistra.com/en/home/. And that’s how it appears now

[Prasant]

Hello Nellie,

Thanks for asking.

I see that you have added CSS that’s changing the background color of navbar and sub menu. To have white background in sub-menu please remove .x-navbar .sub-menu from following code. It seems that you have added the code in X > Theme Options > CSS:

.x-navbar, .x-navbar .sub-menu {
    background-color: transparent !important;
}

So the code that you should finally be having:

.x-navbar {
    background-color: transparent !important;
}

Thanks.

[nelliegarcia]

Thanks for your always helpful answers! I’ve actually modified the CSS code to this:

/** Transparent Header on desktop /
.masthead .x-logobar, .masthead .x-navbar {
background-color: transparent;
border: 0;
}
.masthead {
position: absolute;
width: 100%;
}
.masthead .x-navbar-fixed-top {
background-color: #fff;
}
/ White header on mobile /
.x-navbar .mobile .x-nav li{
background-color: #FFFFFF;
}
/ Menu sub-item design **/
.x-navbar .x-nav .sub-menu li{
left: 0px;
right: auto;
background-color:rgba(255,255,255, 0.9);
}

And it gives this result I’m quite happy about:

The only last thing I would like to modify is the alignment of the subitems to the main menu. How could I do to align the subitems to the left of the blog title in the menu?

Thanks again for your help!

[Prasant]

Hello Nellie,

Thanks for updating the thread.

Please try following CSS under X > Theme Options > CSS and let us know if that’s what you are looking for. If not, kindly elaborate the question and we will assist you further:

.masthead-inline .x-navbar .desktop .sub-menu {
    right: auto;
    left: 0;
}

Thanks.

[nelliegarcia]

Hello! Perfect, it worked, thanks a lot

[jade]

Glad to hear it’s sorted, Nellie.

Have a nice week ahead.