[Resolved] How to set sticky logo position same as site logo?

[Mathew]

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!

[Leo]

Hi there,

Where is the logo set currently? Are you able to provide a link to your site? Thanks!

[Tom]

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

[Mathew]

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.

[Leo]

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/

[Mathew]

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!

[Leo]

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.

[Mathew]

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.

[Mathew]

I think I got it. I use added float right to the css and it works!

[Leo]

Glad you figured out 🙂

[Author]

Posts