- This topic has 9 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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,
MatthewCustomer Support
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
MatthewHi 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,
MatthewI 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
@mediaquery for table and desktop views. It won’t work because of that. You need to place it outside of that@mediaquery.Brilliant 🙂 Many thanks for your patience Fernando, it’s now working 🙂
You’re welcome, Matthew! 🙂
- You must be logged in to reply to this topic.
