Docs

[Rick W]

Hi! My nav on mobile sizes is turning transparent when collapsed. I can’t find where it goes wrong, should be a white background. Can you help?

[Rick W]

This reply has been marked as private.

[Rick W]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
	.masthead .x-nav {
		position: relative;
	}
}

To center the menu, add this custom css

@media (min-width:  980px) {.masthead-inline .desktop .x-nav {width: 66%;}}
@media (min-width:  1290px) {
		.masthead-inline .desktop .x-nav {
	    margin-left: auto;
	    margin-right: auto;
	    width: auto;
	}
}

Hope it helps, Cheers!

[Rick W]

Hi! The menu is centered now, thanks for that. But the mobile menu background is still transparent. Any thoughts on that?

[Christopher]

Hi there,

Please find following code :

.masthead .x-nav {
    width: 82%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

And update it to :

@media (min-width:979px){
.masthead .x-nav {
    width: 82%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
}

Hope it helps.

[Rick W]

Yes, that helped. Thanks a lot for the input!

[John Ezra]

You’re most welcome! 🙂

[Rick W]

Cheering to soon…

On my computer everything works perfectly on every browser and screensize, but when i visit the website on any mobile device the menu still has a transparent background. Please 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.

.x-nav-wrap.mobile.collapse.in {
    height: 350px;
}

ul#menu-main-menu-1 {
    margin-top: 120px;
}

Hope this helps – thanks!

[Rick W]

Yep, that’s it! Thanks!

[Zeshan]

You’re welcome! 🙂

[Author]

Posts