Archived topic
Can anyone help me on this small issue?
3 replies · Started by Stephen on November 23, 2020
Hello, I am a beginner level developer, now we are open a BLACK FRIDAY sale.
We want to add a button called "BLACK FRIDAY DEAL" and only change this button color to Red on main menu bar, Now I added the button, but don't know how to change the color and to center its position. Is there anyone can help on this issue?
Thanks in advance,
Reference link https://tfwph.com/
Hi there,
first off give that a menu item a CSS class of: deal-button
This article explains how to add CSS classes to menu items:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Now add this CSS:
.deal-button button {
background-color: #f00;
}
@media(min-width: 900px) {
.main-navigation:not(.slideout-navigation) .main-nav {
flex: 1;
}
.main-navigation:not(.slideout-navigation) .main-nav>ul {
display: flex;
}
.deal-button {
margin-right: auto;
margin-left: auto;
transform: translateX(64px);
}
}Alternatively you may want to consider using a Block Element to add a Black Friday Deal banner using the before_header hook. That will allow you to display it above the navigation on desktop and mobile.
Yes, it is working now. Thank you very much!
You're welcome
