Having trouble getting the mobile menu to match the style of main nav

Hi there,

1. Your CSS can not override the theme menu item hover color, you need to make your CSS more specific or use !important.

2. And you should add the hover state to the li, not the a. For example, this is your CSS:

 .main-navigation .main-nav ul li.mobile-nav-button a:hover {
                    color: var(--primary-ultra-dark);
                    background-color: var(--action-hover);
}

It should be changed to:

.slideout-navigation.main-navigation .main-nav ul li.mobile-nav-button:hover > a {
                    color: var(--primary-ultra-dark);
                    background-color: var(--action-hover);
}

Hi there,

The ‘Contact Us’ button appears to have the correct hover color from my view. Have you fixed that?

As for this:

..how do I make the Home link have the blue background on hover.

You can try this CSS:

.current-menu-item a:hover {
   background: rgb(7, 84, 120);
}

The color should’ve been var(----action-dark).

The contact us in the slideout menu has the correct hover color:
https://app.screencast.com/sop7kbbbvs1GV

Are you referring to the desktop? If so, you need to change the desktop CSS as well.

can you please explain why I need to put two extra — in front of it to get it to work?

That’s how CSS defined, check this out: https://developer.mozilla.org/en-US/docs/Web/CSS/var

Yes, the color is fixed, but what I mentioned in my reply is the area here https://snipboard.io/9KYXTc.jpg activates the hover color for the Contact Us link instead of it only activating when the link is actually hovered.

As I said there’s no hover state on mobile, the hover state color will show when the button is clicked.

The Contact Us button works fine when you hover over it on mobile. But it also changes color when you hover over the area between the Services link and the Contact Us button

Oh I see, It’s because you added the margin to the a, so the margin is counted into the button, when you hover on the margin, you are activating the hover state for the button.

So remove margin-top from this CSS:

  /* changes size and color of link button on mobile menu- need to add class .mobile-nav-button to last menu item */
            @media (max-width: 1024px) {
                .main-navigation .main-nav ul li.mobile-nav-button a {
                    background-color: var(--action);
                    color: var(--primary-ultra-dark);
                    text-align: center;
                    line-height: 35px;
                    width: 200px;
                    margin-top: 100px;
                    border-radius: 10px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0px;
                }

And add the margin to the li:

.main-navigation .main-nav ul li.mobile-nav-button {
    margin-top: 100px;
}

Make sure the above CSS is added to the correct media qeury.

No Problem 🙂