[Resolved] Logo, site title and slogan centered, with split navigation (left and right)

[Gelu-Dănuț]

I use now this CSS:

.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 125px;
    right: 0px;
}
@media (min-width:769px) {
    .site-branding {
        display: inline-block;
        vertical-align: middle;
    }
	
    .site-logo {
        float: left;
        margin-right: 20px;
	}

I want logo with site title and slogan in primary navigation.
On scroll (desktop), i want logo with site title centered (in navigation middle).
On mobile and desktop i want to hide menu item separator.
I’m sorry for my English language.

[Tom]

Hi there,

Have you tried these instructions?: https://docs.generatepress.com/article/centering-logo-navigation/

Let me know 🙂

[Gelu-Dănuț]

Yes, thank you, don’t work for my website.
I want logo before site title and slogan, centered.
Navigation is divided by these (left and right).

[Tom]

Can you show me an example of what you’re trying to achieve?

Let me know 🙂

[Gelu-Dănuț]

I want to make https://www.dgsromania.ro/, with logo+site title and slogan centered, and navigation: https://www.mihairomanfotograf.ro/.
And if scroll all centered, in mobile centered…
My English language is bad, sory!

[David]

Hi there,

can you complete ONLY #5 and #6 of the steps here:

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

Then let me know and ill provide the CSS

[Gelu-Dănuț]

Thank you! Done!

[David]

Can you check step 5 :

[Gelu-Dănuț]

Sory! IS OK now? Thank you!

[David]

Now add this CSS to your site:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .site-branding-container, .sticky-menu-logo .navigation-stick:not(#sticky-placeholder) .navigation-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    .site-branding-container {
        flex-direction: column;
    }
    
    .main-navigation ul {
        display: flex;
        justify-content: center;
    }
    
    
    .main-navigation .menu-item-separator {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
        font-size: 0;
        background: transparent !important;
    }
}

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav li.menu-item-separator {
        display: none !important;
    }
}

You may want to:

1. Reduce the Site Title font size in Customizer > Typography > Headings

2. Increase the Mobile Menu Breakpoint:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[Gelu-Dănuț]

Thank you. On scroll, please, is possible to make centered logo?
On mobile, hide Menu Item Separator?

[David]

I updated the CSS here

[Gelu-Dănuț]

Thank you! Thank you! Thank you!
5 stars for GeneratePress Premium and customer support!
Thank you! Thank you! Thank you!

[David]

Happy to help 🙂

[james]

Hi guys,

I’ve been trying to follow this guide and also the other resource that’s referenced above.

Whatever I try I’m unable to get the number of menu items split evenly. From reading your description above you mention “Steps” such as “step 5” but there are no steps in the guide you provided! Any thoughts, or can you include the steps involved?

You’ll see how my menu looks below:

[Author]

Posts