Archived topic
StoryBrand style menu item
7 replies · Started by Dajuan on February 9, 2023
Hi GP team,
I obtained the CSS code below from support to implement the StoryBrand style menu item. I have two questions:
1. I added "!important" because the desired text color didn't take effect. Is this OK?
2. How do I apply this CSS to the mobile menu?
Here's the site: https://inhisimagephotography.com/
/* StoryBrand Contact Button */
.main-navigation:not(.slideout-navigation)
.main-nav li.nav-button a {
background-color: #899FB7;
color: #ffffff !important;
border-radius: 40px;
}
.main-navigation:not(.slideout-navigation)
.main-nav li.nav-button a:hover {
background-color: #ffffff;
color: #899FB7 !important;
}Hi Dajuan,
1. Yes, you can add !important.
2. You are using slideout navigation (off canvas mennu) on mobile, so just remove :not(.slideout-navigation) from both code.
And you need to add nav-button class to the contact button in the menu that you assigned to the off-canvas menu as well, just like what you've done for the menu on the desktop.
Thank you Ying!
No Problem, glad to help :)
Hi Ying,
I suspect there is a conflict when I'm on the page for which the menu item has nav-button applied. See what happens to the Contact Us menu item when you're on the Contact page:
Hi Dajuan,
Try adding a !important to this line as well:
background-color: #899FB7;
Amazing. Thank you!
You're welcome, Dajuan!