[Resolved] StoryBrand style menu item

[Dajuan]

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

[Ying]

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.

[Dajuan]

Thank you Ying!

[Ying]

No Problem, glad to help 🙂

[Dajuan]

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:

https://inhisimagephotography.com/contact-us/

[Fernando]

Hi Dajuan,

Try adding a !important to this line as well:

background-color: #899FB7;

[Dajuan]

Amazing. Thank you!

[Fernando]

You’re welcome, Dajuan!

[Author]

Posts