Header navigation menu with centered logo (view images)

[jvascomarques]

Hello I’m trying to do my first site in WP with Elementor and GeneratePress, and I can’t manage to accomplish this kind of header navigation menu. Is this possible using GP?

1:

2:

Image 1 shows the standard menu of the site. What I can not do is to get the logo at the center and the menu items at the left and right of the logo.

Image 2 shows the menu after scrolling down the page. I think its called a sticky menu. It’s basically the same but with a smaller logo, and a golden 50% transparent background.

I’m a graphic designer, and an obvious newbie as you can tell. I don’t know css php html etc. But I’m willing to follow your wise instructions. Thank you.

GP Premium 1.2.96

[jvascomarques]

as the images don’t show up…

1
https://www.dropbox.com/s/ruggcf1xgzcpm43/PreEC1.jpg?dl=0

2
https://www.dropbox.com/s/2p3yr84aemmsfhp/PreEC2.jpg?dl=0

[Leo]

Hi there,

This should help: https://docs.generatepress.com/article/centering-logo-navigation/

Let me know if you need more info.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jvascomarques]

Thanks Leo, you got me almost there.

I’m having trouble making my svg logo appear. Regarding SVG, I followed this instructions: https://docs.generatepress.com/article/adding-svg-logo/

I can upload the logo but first it took a while to appear, and then it appears gigantic:

Thanks,
Vasco

[jvascomarques]

Again, image not showing in message:
https://www.dropbox.com/s/28o1hxtvfesea17/GiganticLogo.jpg?dl=0

[Leo]

Did you set the size using this CSS? https://docs.generatepress.com/article/adding-svg-logo/#setting-the-size

If this doesn’t work can you provide a link to your site? Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jvascomarques]

I did use that CSS:

.site-logo img {
width: 100px;
height: 100px;
}

But does this impact the logo, as it was put into the menu through a custom link? and not through the “Logo” in Site Identity in Customise.

I putted the code in the customiser Additional CSS as seen in this image:

You can see the page here:
http://www.dev.folk.pt/palacete-virtus/

[jvascomarques]

Hello Leo, I believe I just got it!

I added this CSS:

.centered-navigation-logo img {
width: 100px;
height: 100px;
}

It worked! Thanks

[Leo]

Ah yeah sorry I missed that. Glad you found the solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts