[Resolved] Mobile Menu navigation button background color

[Ivars]

Hi,

I would like to add an opaque background to the navigation buttons for the only the mobile menu on my site.

The site is active.

Customizing color/navigation background adds a background around the button on the desktop and on the mobile menu. When the mobile menu is pulled down (vertical, left side), the color band goes across he entire screen. Not practical.

What I want is just some contrast behind the mobile menu button so that the button text does not get lost in images.

Thanks,

Ivars

[Ying]

Hi Ivars,

You can try add this CSS:

#mobile-header div#mobile-menu {
    background-color: #7b94b58a;
}

Just need to replace the color code 🙂

[Ivars]

Hi Ying,

Thanks for the suggestion.

I am totally new to website design. I just opened up GeneratePress in WordPress and started doing stuff.

Where/how should I enter the CSS?

Thnaks,

Ivars

[Ying]

No worries 🙂

You can add it to customizer > additional CSS.

[Ivars]

Hi,

Thanks.

The CSS works but does not do what I want. The CSS creates a colored box that covers the entire width of the mobile screen even though the mobile menu pulls down in a single column from the top left.

take a look at customizing\colors\primary navigation\navigation background\choose current color (the last option on the right). For desktops this puts a square, colored, box around the navigation button for the page that is active. But switch to mobile mode an the square becomes a horizontal bar across the full width of the screen.

I want just the box like it does on desktop mode. Can this be done?

Thanks,

Ivars

[Ying]

I’m having a hard time to understand what you are trying to achieve.

Do you want something like this?
https://www.screencast.com/t/alQyYSju

If so, set the current background color in customizer, then add this CSS:

#mobile-header.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    display: inline-block;
}

[Ivars]

Hi,

Yes! Thanks. That is what I want to achieve.

Sorry you had to guess so much. I could not figure out how to send you a picture.

I will try it a bit later.

Thanks again.

Ivars

[Ying]

All good, no worries 🙂

I hope I guessed it right this time lol~

Have a great weekend!

[Ivars]

Hi Ying,

Thanks! that worked well. You are good at guessing.

I would like to take it two steps further if possible…

1. Can all MOBILE MENU items be highlighted like that? and,

2 Can there be padding (I think it would be padding as opposed to a margin) so that each button looks discreete. The way it is now, if all mobile menu buttons get a backgrounds then the backgrounds will run together and form a solid vertical block.

I would do #1 only if I can do #2.

lol… I learned a new feature of my SnagIt account!

Ivars

[Ying]

1. Can all MOBILE MENU items be highlighted like that? and,

Yes, just set background color for the navigation item.

2. Can there be padding

Yes, add this CSS:

#mobile-header.main-navigation .main-nav ul li:not(:first-child) > a {
    display: inline-block;
    margin-top: 10px;
}

[Ivars]

OK. thanks.

I am not sure where to set the background color for the mobile menu navigation item?

But first….

I set the hover color in customize/colors/global colors/primary navigation/choose hover hover color.

I think this would work perfectly if the mobile menu did not extend white/non-transparent across the entire width because hover sort so of works on the mobile ….

Can the white background be made as wide as the words or the widest word? Or, should I just stick with setting the menu item background color…. which you will have to tell me where to actually set it.

Thanks yet again.

Ivars

[Ying]

Can the white background be made as wide as the words or the widest word?

No, you’ll need CSS to achieve this. Try follow the steps:

1. Clear the background color (the 1st of 3) set for navigation background.

2. Change this CSS:

#mobile-header.main-navigation .main-nav ul li:not(:first-child) > a {
    display: inline-block;
    margin-top: 10px;
}

to:

#mobile-header.main-navigation .main-nav ul li:not(:first-child) > a {
    display: inline-block;
    margin-top: 10px;
    background-color: var(--base-3);
}

[Ivars]

Hi,

It did not work completely….

Now only the menu words highlight when hovering. Good.

The home button acts differently when not on the home page. It makes a solid bar across the screen.

The background is still solid/ not transparent and takes up the top half of the screen.

These are the CSS changes…

Any idea what to try?

Thanks,

Ivars

[Fernando]

Hi Ivars,

Can you try replacing the current code you’ve added to make the changes you want for this specific issue with these?:

#mobile-header.toggled{
    z-index: 10000;
    margin-top: 0px;
    position: fixed;
    top: 0px;
}

#mobile-header.main-navigation.toggled .main-nav ul li:not([class*="current-menu-"]):hover > a {
    background-color: transparent;
}

#mobile-header.main-navigation.toggled .main-nav ul li.current-menu-item > a {
    background-color: var(--accent-2);
}

nav#mobile-header.toggled.main-navigation .main-nav ul li > a {
    display: inline-block;
    margin-top: 10px;
    background-color: transparent;
}

nav#mobile-header.toggled {
    height:100%;
    background-color:#ffffffe6;
}

nav#mobile-header.toggled ul#menu-primary-1 {
    background-color:transparent;
}

Kindly replace background-color:#ffffffe6; to your preferred background color with its specific opacity: https://rgbacolorpicker.com/

Moreover, kindly replace margin-top: 0px; with your preferred spacing values.

Please let us know how it goes. If it doesn’t adhere to your preference, kindly provide a descriptive list of the changes you want to make. Hope this helps and hope to hear from you soon! 🙂

[Ivars]

Hi Fernando,

Thanks for the reply. the solution works and I can work with it but I do want to explain what I am really trying to achieve in case you do have a solution.

First, the mobile menu has no contract to the web page when the mobile menu drops down and the button words are not legible. Even the hamburger/x button is not legible.

Please view here… https://www.screencast.com/t/ODNy9h4iA4qJ

What I want to achieve is some background color with opacity around the button words only as well as a hover color. If I change the button background using customization the background gets colored all the way over to the right side of the screen probably because the hamburger is on the right side.

I also want the background not to be full height (like the home button shows in the following clip). Just discrete boxes around the button words. Also, if the same can be done with the hamburger then good. If not, no problem.

This is what I want… https://www.screencast.com/t/sWkzj5sjwmrZ

Thanks,

Ivars

[Author]

Posts