[Resolved] How to get the Primary Navigation and the Logo as in the demosite.

[Max]

Hi GeneratePress users and developers,
as in the title I want my Primary Navigation on the right side and the Logo on the left Side.
I do also want my Prim Nav not that high as in the demo, so with Mouseover a color change with a little space up and down.
Currently I have a Website Logo and no Prim Nav Logo. The Website Logo ist on the right Side and my Prim Nav on the left.
The problem is everytime I put a little bit of Space under and above the header I cant center my Navigation without making the Mouseover Color bigger and my second Problem is that I want the Nav bar to Stick but if I do so I have my Website Logo Disappear and if I choose a Nav Bar Logo it is on the right side and not left.
In the End if this to hard to understand you could just describe how I can get my Nav Bar with the Logo as it is in The demo (demo.generatepress.com)

[Leo]

Hi Max,

Little confused about what you meant but you can get the logo/navigation layout in the demo by doing the following:
1. Customizer > Site Identity > upload a Logo
2. Customizer > Layout > Primary Navigation > Navigation Position > Float Right
3. Customizer > Layout > Primary Navigation > upload a Navigation Logo
4. Customizer > Layout > Primary Navigation > Navigation Logo Position > Sticky

Let me know if this is what you are after.

[Max]

Hi Leo
I already figured out how that works but Thank you for the Answer. I still have one problem :
The Mouseover Color of my Nav Bar covers the whole header (hope you understand what I mean), in the demo it covers just a small part around it. I already had a solution by increasing the internal distance in the head area, but I dont want such a big header.
Now you can take a look at my site, I got the theme just yesterday and was in maintenance mode so I couldn`t post it before: My Site

[Max]

An additional question : How do I get the Site title on the right side of the Logo ?
Thanks for the fast answer btw;-)

[Leo]

You can choose header background color and navigation color separately:
Header: Customizer > Colors > Header > Background
Navigation: Customizer > Colors > Primary Navigation > Background/Background Hover
So take the demo site for example, the header background color is set to white, the navigation background is set to white (or transparent), and the navigation background hover is set to blue.

For adding site title next to logo, checkout this article: https://docs.generatepress.com/article/putting-site-title-next-logo/

Let me know 🙂

[Max]

Thanks this worked but it`s not centered. The site title is to high: Look here

[Jamal]

In the css Leo linked you to, you can add top padding to make this your full css

@media (min-width:769px) {
    .site-branding {
        display: inline-block;
        padding-top: 30px;
    }

    .site-logo {
        float: left;
        margin-right: 20px;
    }
}

Regarding the quote below in this reply

The Mouseover Color of my Nav Bar covers the whole header (hope you understand what I mean)

Have you tried reducing height of the primary menu item? ” Customize > Layout > Primary Navigation > primary menu items”

[Max]

Thanks Jamal that css worked perfectly.
I tried reducing height of the primary menu item, but if I do so it isn`t centered and floats to high exactly like the site title before…

[Tom]

If the navigation isn’t as tall as the logo/site title, you can move the navigation down like this: https://generatepress.com/forums/topic/center-menu-with-logo/#post-254728

[Max]

Thank you guys ! All my problems solved in this short amount of time.
Keep the awesome work 😉

[Leo]

Glad we can help 🙂

[Christine]

I would also like to achieve a similar look to the demo site menu but don’t see the option to upload a navigation logo.

[Leo]

It should be here: https://docs.generatepress.com/article/primary-navigation-layout-overview/

Make sure the menu plug addon is activated:
https://docs.generatepress.com/article/installing-gp-premium/#activate-your-modules

[Author]

Posts