Archived topic
How to set sticky logo position same as site logo?
9 replies · Started by Mathew on May 31, 2017
Hi,
When going from non-sticky to sticky, the logo on the sticky navigation changes to a small size (which is fine) and shift to the left. How do I make the sticky logo stay in the same position as site logo and only the logo size is changed?
Thanks!
Hi there,
Where is the logo set currently? Are you able to provide a link to your site? Thanks!
It's likely that your header has padding, which pushing the logo to the right (as it should).
Your navigation doesn't have the same padding, which is why there's a change.
If you want it to be the exact same, I suggest just using your navigation as the header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
Unfortunately, I don't have a link to share yet as I am developing locally.
I was able to use my navigation as the header using the instruction provided. Thanks!
With that, how do I add buttons (e.g. social media icon, Contact Us, etc.) on the navigation?
I am using GP with Elementor.
For icons you can use GP's built in FontAwesome library: https://docs.generatepress.com/article/adding-icons-to-menu-items/
For buttons, this might help: https://docs.generatepress.com/article/adding-icons-to-menu-items/
Some other button CSS you can consider: https://docs.generatepress.com/article/adding-buttons/
I couldn't find a place in GP Hook to add a button to both the Primary Navigation and Sticky Navigation sections. Can you please help?
For CSS of the button, I assume it will be added in Customized -> Additional CSS.
Thanks!
If you want the header to be the same as sticky navigation, give this a shot:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
As for inserting button into navigation, try the this hook:
https://docs.generatepress.com/article/generate_inside_navigation/
Yes CSS can go in Addtional CSS.
My apology and sorry for the confusion, Leo. I meant to say I want to add a button next to my menu items (to the far right. For example..."About", "Contact", follow by the Button). Currently I use navigation as a header (sticky + station), and here are my settings:
Under Primary Navigation
Navigation Location = Below Header
Navigation Logo Placement = Sticky + Station
I hide the header using the follow:
.site-header {
display: none;
}
Thanks again.
I think I got it. I use added float right to the css and it works!
Glad you figured out :)