I set it so my menu has black text when you land on the page, but when you scroll down, the sticky menu has white text with a black background. I styled my button originally to have a black outline, black text and no background. So what I would be looking to do was to change it to a white outline and white text when you scroll and initiate the sticky menu.
Is there any way to add a special button, such as "shop", in which it is outlined with a box to make it stand out?
For instance, the "submit a ticket" button on Labortator's forum
Hi Jon,
Yes, i will demonstrate how we have done Get the app button on the Landing demo, which is the same thing on this case.
We have added a class to that button:
(view large version)
(view large version)
Then we have styled that get-the-app CSS class:
/* Get the app button on menu */ .get-the-app a { background: #fff; color: #858a99 !important; border-radius: 50px; padding: 4px 15px; } .get-the-app a:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); transition: box-shadow all 300ms; } .get-the-app a:after { display: none; }Ohh, I didn't even know you could go into "screen options" to allow a custom CSS class for each menu item... Thank you!
Just gave it a five star rating!
Hi Jon,
Thank you very much :)
One more question: how would I style the "dark" and "light" version of the button differently?
Hi Jon,
From the code that i send you earlier, just change the background and color hex code to your prefered color.
I set it so my menu has black text when you land on the page, but when you scroll down, the sticky menu has white text with a black background. I styled my button originally to have a black outline, black text and no background. So what I would be looking to do was to change it to a white outline and white text when you scroll and initiate the sticky menu.
Hi Jon,
Can you please add the code below to Custom CSS
.main-header.is-sticky.sticky-active .get-the-app a {
background: #2078dc;
color: #fff !important;
}