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/

[Author]

Posts