Skip to content
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
  • Log In
  • Free Support

[Resolved] Header navigation menu with centered logo (view images)

Home › Forums › Support › Header navigation menu with centered logo (view images)

  • This topic has 8 replies, 2 voices, and was last updated 3 years, 11 months ago by Leo.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 16, 2017 at 10:34 am #318754
    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:
    Top Menu (what you see when entering the site)

    2:
    Menu you see after scroolling

    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
    May 16, 2017 at 10:37 am #318756
    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

    May 16, 2017 at 1:55 pm #318862
    Leo
    Staff
    Customer Support

    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/

    May 19, 2017 at 2:30 am #320572
    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:

    Gigantic logo

    Thanks,
    Vasco

    May 19, 2017 at 2:31 am #320573
    jvascomarques

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

    May 19, 2017 at 9:03 am #320758
    Leo
    Staff
    Customer Support

    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/

    May 19, 2017 at 1:04 pm #320909
    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:

    Customize

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

    May 19, 2017 at 1:52 pm #320925
    jvascomarques

    Hello Leo, I believe I just got it!

    I added this CSS:

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

    It worked! Thanks

    May 19, 2017 at 7:15 pm #321009
    Leo
    Staff
    Customer Support

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Log In

Common Issues

  • Missing style.css
  • Updating errors
  • Plugin Install Failed

Useful Articles

  • Installing GP Premium
  • Installing GeneratePress
  • How to add CSS
  • How to add PHP

GeneratePress

  • About
  • Premium
  • Site Library
  • Gutenberg
  • Affiliates
  • Reviews
  • Brand Assets
  • Blog
  • We’re Hiring!

Support

  • Documentation
  • Contact Us
  • Support Forums
  • Fastest WordPress Theme
  • Changelogs
  • Legal
  • Donate
  • Translate

Popular FAQs

  • Install GeneratePress
  • Installing GP Premium
  • Missing style.css
  • Plugin Install Failed
  • Adding CSS
  • Adding PHP
  • WordPress Hosting

Social

  • Facebook
  • Twitter
  • WordPress
  • GitHub
Made with on Vancouver Island
  • Home
  • Premium
  • Site Library
  • Install
  • Contact
  • Support Forum
  • Documentation
  • Account
  • Checkout