[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.

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[Tom]

Hi there,

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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).

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[Tom]

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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!

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[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

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

[Gelu-Dănuț]

Thank you! Done!

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[David]

Can you check step 5 :

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

[Gelu-Dănuț]

Sory! IS OK now? Thank you!

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[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

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

[Gelu-Dănuț]

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

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[David]

I updated the CSS here

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

[Gelu-Dănuț]

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

Advertoriale SEO in site-uri cu autoritate mare și foarte mare
https://www.farcasgelu.eu

[David]

Happy to help 🙂

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

[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