[Resolved] Adding a mobile menu button

[Matthew]

Hello,

After reading a few other forum posts regarding how to add a button to the mobile menu I’m still struggling with this.

Details shared in private information.

Cheers,
Matthew

[Fernando]

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?

[Matthew]

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

[Fernando]

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.

[Matthew]

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

[Fernando]

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;
}

[Matthew]

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

[Fernando]

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.

[Matthew]

Brilliant 🙂 Many thanks for your patience Fernando, it’s now working 🙂

[Fernando]

You’re welcome, Matthew! 🙂

[Author]

Posts