Archived topic
Header custimization
8 replies · Started by iou on February 11, 2021
Hello,
I am seeking help in editing the header for the Dev demo. I have done an import of the demo on my site.
- I am looking to add buttons to the menu (have one of the links in navigation look like a button) like you all have in your stream demo.
- I am also looking to create a second header that pops up on when a user begins to scroll (like in the Access demo).
How can I achieve these things with Generatepress? Any help is greatly appreciated! I have generatepress premium.
Hi there,
1. This article explains how to make a menu item look like a button:
https://docs.generatepress.com/article/adding-buttons-navigation/
2. You can enable the Sticky Navigation:
Thank you for the quick response.
For the menu item button, I read the article you provided and enabled css classes on the menu items. However, I am still unsure on how to create a custom css class and where to place the code.
Also, for the sticky navigation, how can I change the color of the sticky navigation like in the Access demo? It changes to a blue background on scroll. And one last question - is it possible to change the menu on the sticky nav, if so how?
Thank you!
Hi Iou,
This is where you add custom CSS class to menu items:
https://www.screencast.com/t/KN848Cky2zV
Go to customizer > colors > primary navigation > parent items > background color for sticky navigation background color.
The navigation of Access home page is transparent, because it's using header element to merge the header with content, and the transparent color was set in the header element. This article should help:
https://docs.generatepress.com/article/how-to-create-a-page-hero/
Hi Ying,
I already enabled the custom css on me u items like shown in your screenshot above. My question is where do I place the code that was in your guide. Do I paste the code and create the css class in the functions pho sheet?
When I change the header background for sticker header, the nav menu turns that color and the nav menu text color changes. How can I get the standard menu to be plain white with black text and the sticky menu to be orange with white text?
Thank you. I can send over screenshots to make things more understandable if needed.
The Code which is CSS can go in your Customizer > Additional CSS.
Can you share a link to your site so i can see the current header layout ?
Ah okay, thank you.
I left a reply with site info in the section that support can see
Try this CSS:
.sticky-enabled .main-navigation.is_stuck {
background: orange;
}
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a,
.main-navigation.sticky-navigation-transition .main-nav > ul > li:hover > a,
.main-navigation.sticky-navigation-transition .main-nav > ul > li[class*="current-menu-"] > a,
.main-navigation.sticky-navigation-transition .main-nav > ul > li[class*="current-menu-"]:hover > a {
color: #fff;
background: orange;
}change the orange to your #hex-color
