Archived topic
Customising Header Navigation
5 replies · Started by Daniel on March 23, 2019
Hello,
I am trying to customise my navigation so it is like this website's: http://www.klientboost.com
I'm getting there but have a few questions:
1) I have set up my transparent navigation which is great but when I scroll down, the header background color is black and I need it to change color - also the font color text too.
2) How do I include that 'Free Proposal' button in the navigation?
3) On mobile, things go a bit wrong as my logo stays on top of the hamburger menu; what settings do I have to change for the logo, hamburger menu and 'free proposal' button to stay on one line?
Many thanks.
Hi there,
1) If you use the header element module, you can set the navigation color specific for that page hero (under the Site Header tab), then the sticky navigation color will inherit the settings in Customizer > Colors > Primary Navigation:
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/
2) This should help:
https://docs.generatepress.com/article/adding-buttons-navigation/
3) I don't see the navigation in the site you provided. Can you double check?
Thanks for the super quick response!
I will have a look at all those options.
For number 3, I was referring to the klientboost.com website on mobile. If you look, you can see, starting from the left, they have a small logo (unique to mobile only, by the way) then a ‘free proposal’ button and then the nav hamburger menu.
I am having replicating the same effect on mobile. I don’t know to ensure all those elements lie on the same line; my logo for instance always keeps on top and then the hamburger menu stays underneath.
Hope that’s a bit clearer :)
You can use our mobile header add-on:
https://docs.generatepress.com/article/mobile-header/
Then add the button using the hook:
https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header
https://docs.generatepress.com/article/adding-buttons/
Many thanks Leo.
Just quickly back to number 1:
I need my navigation font color to change when a user is scrolling down. So if it’s at the top, it will be white (and the background is clear) but as soon as the user starts scrolling, the text will change to black and the background will change to white.
I’ve figured out the background color bit but is it also possible to change font color?
Many thanks
The navigation text color should be what you are looking for no?
https://docs.generatepress.com/article/header-element-overview/#site-header
Let me know :)
