Adding a mobile menu button

Hi Matthew,

To, clarify, are you adding a button solely on mobile and not on desktop?

Also, in Appearance > Customize > Layout > Header, do you have Mobile Header turned on?

Hi Fernando,

I've managed to add the button to the mobile header :)

However, can you please confirm if this CSS is correct as I would like the mobile CTA button to appear the in the same design as on desktop....

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f4941c;
border: 2px solid #f4941c;
color: #ffffff;
line-height: 35px;
}
#mobile-header .inside-navigation {
align-items: center;
}
background-color: #f4941c;
border: 2px solid #f4941c;
color: #ffffff;
line-height: 35px;
}

Cheers
Matthew

Hi Matthew,

How are you adding it currently?

Note: If you use a Block Element - Hook, you shouldn't need any custom CSS to alter its design.

Hi Fernando,

I've shared an image of the code in the private comments sections.

In the Custom CSS this is the code I've been using for the design of the desktop button...

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f4941c;
border: 2px solid #f4941c;
color: #ffffff;
line-height: 35px;
}

Cheers,
Matthew

I see.

Try adding this CSS for the mobile button:

a.button.my-custom-button {
    background-color: #f4941c;
    border: 2px solid #f4941c;
    color: #fff;
    line-height: 35px;
}

.mobile-bar-items:hover a {
    background-color: #424242;
}

Thanks Fernando, just confirming I've added it correctly as per https://ibb.co/BcWqs9H

You added it inside a @media query for table and desktop views. It won't work because of that. You need to place it outside of that @media query.

Brilliant :) Many thanks for your patience Fernando, it's now working :)

You're welcome, Matthew! :)