Archived topic
Header navigation menu with centered logo (view images)
8 replies · Started by jvascomarques on May 16, 2017
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.
as the images don't show up...
Hi there,
This should help: https://docs.generatepress.com/article/centering-logo-navigation/
Let me know if you need more info.
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
Again, image not showing in message:
https://www.dropbox.com/s/28o1hxtvfesea17/GiganticLogo.jpg?dl=0
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!
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/
Hello Leo, I believe I just got it!
I added this CSS:
.centered-navigation-logo img {
width: 100px;
height: 100px;
}
It worked! Thanks
Ah yeah sorry I missed that. Glad you found the solution :)
