Mobile menu customizer

[gallagherBD]

Hey, I did a transparent header and am using the Ethos stack.

I cannot find where I can customize the submenu and mobile button. Can you tell me how?

[gallagherBD]

Just to shed more light… I am using Ubermenu. But I am also using code to center the logo and menu. I think that may be causing some issue. Otherwise, the rest of the menu structure works fine.

Can you take a look and let me know.

Gallagherbd.com

[jade]

Hello @gallagherBD,

The settings for the mobile should be available in the Responsive & Mobile area:

You can find more information here:

Mobile & Responsive | UberMenu 3 Knowledgebase

Hope this helps.

[gallagherBD]

Yeah I know that is where it is. If you test the site you will see that I figured that out and customized the submenu. However, the main mobile menu is what is not showing up correctly.

[gallagherBD]

To clarify… The top level of the responsive menu is still transparant.

[friech]

Hi @gallagherBD,

It looks like you’re using a custom CSS to make the navbar float above the slider, please wrap that custom CSS with @media (min-width: 960px) media query so it does not affect the mobile view/menu.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks,

[gallagherBD]

Thanks! Unfortunately that took away the transparency of the header. Can it be slight adjusted?

[friech]

Hi @gallagherBD,

You can not have a transparent background on your mobile header, because your menu and slider text will overlap.

To resolve this, you need to place back the header to its original position (on mobile), hence my suggestion above to wrap your custom CSS with @media (min-width: 960px)

Thanks,

[gallagherBD]

Thanks Friech,

We need to simplify this a bit. I am sure that what you are saying makes perfect sense to you, but to me is seems like giberish.

When I add the wrap to the custom CSS it takes the transparency away on the desktop version.

Photo below

[friech]

Hi @gallagherBD,

Sorry for not being clear, a media query wrapped CSS looks like this:

@media (min-width: 960px) {
	.x-navbar {
	    position: absolute;
	    width: 100%;
	    top: ;
	    background-color: transparent;
	    -moz-box-shadow: none;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	    border-bottom: none;
	}
}

Here’s a less than 5 minutes tutorial that explains how CSS Media Queries works.

The goal here is to only apply the navbar transparent background on screen 960px and above (netbook, desktop) and then return to its original color and position when the screen is 959px and below (tablet, mobile).

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Thanks,