Docs

[btdtboutique]

Hey guys,

I love your work and all your support on the forums.

I have a quick question. I’m trying to change the colour of the fixed dropdown menu on mobile while the top navbar remains transparent.

So far I’ve used the following from another forum thread to make the navbar transparent, which worked really well.

@media (max-width: 979px) {
body .x-navbar {
margin-bottom: -91px;
background-color: transparent;
border: none;
box-shadow: none !important;
}

However, now the dropdown menus items are also transparent. Is there any way to change the background of the navbar to white after the menu icon has been pressed?

[Lely]

Hello There,

Please update above CSS to this:

@media (max-width: 979px) {
body .x-navbar {
margin-bottom: -91px;
background-color: #ffffff;
border: none;
box-shadow: none !important;
}

Hope this helps.

[btdtboutique]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[btdtboutique]

Okay…

I had been searching the forums and found many similar questions answered on there so didn’t think it was outside the scope of support.

re.

https://community.theme.co/forums/topic/how-can-i-give-transparency-background-to-the-fixed-top-header-nav/

https://community.theme.co/forums/topic/navbar-clear-to-background-as-you-scroll/

…

[btdtboutique]

Could you possibly let me know if this is the case, or whether I didn’t ask the question properly.

With regards,

Bernard

[Friech]

Hi Bernard,

Sorry, but I am not entirely certain or your question. You mean, you want the mobile menu items with solid white background, but keep the navigation bar semi-transparent. If so, please add this on your custom CSS:

@media (max-width:  979px) {
	.x-nav-wrap.mobile.collapse.in {
		background-color: #fff;
	}
}

If not, please clarify.

Thanks.

[Author]

Posts