Centre logo with widgets to the right and left

Hi there,

Are you wanting this part to be on the left of the logo?
https://www.screencast.com/t/pgpSvXyu

If can you first add the two parts as two header widgets instead of one?

Let me know :)

Done!

Sorry... I meant I moved them to two separate widgets. Can you still help me with getting those to either side of the centred logo, please?

Hi Raielene,

This CSS can move one of the widget to the left on desktop:

@media (min-width: 769px) {
    aside#custom_html-9 {
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translatey(-50%);
    }
    .inside-header.grid-container {
        position: relative;
    }
}

This helps center the logo if you need to:

@media (min-width: 769px) {
    .site-logo {
        margin-left: auto;
    }
}

Let me know :)

Thank you, Ying! This is very close to what he's looking for, but not quite. Have a look: https://www.anewbreathcounselling.com/ The logo is just a touch too far to the left. How can we get it right in the center for all screen sizes?

Are you saying the desktop view? Try this CSS:

@media (min-width: 769px) {
    .site-logo {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
    .inside-header.grid-container {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

Perfect! That works and even fixed a bit of an overlay issue at certain sizes. Thank you so much! 😊

No problem :)

Hi! I'm trying to do this same thing with another client's site but this time I have the off-canvas menu in the left of logo spot. Looks and works good on desktop, but when I switch to mobile the menu and button are at the top of the logo and aligned left. I think I'd prefer the menu under the logo and then the button under that. Can you help again?

Also, I added "Menu" to the hamburger lines on desktop and would like to do the same for all. Is there a way to do that?

Hi Raielene,

Do you mean something like this? https://share.getcloudapp.com/llu6O9Kn

If yes, try this CSS:

@media (max-width:768px){
    .site-logo {
        order: 0;
        width:100%;
        text-align: center;
    }
    
    nav#mobile-menu-control-wrapper {
        order: 1;
    }
    
    .header-widget {
        order: 3 !important;
    }
}

Almost! I'd like the menu and button centred. And I'd like to add "Menu" to the hamburger lines, same as how they are on desktop.

Hi there,

1. this CSS to center those elements:

@media (max-width:768px){

    .header-widget .appointment {
        justify-content: center;
    }
    nav#mobile-menu-control-wrapper {
        margin: auto;
    }

}

2. Go to Customizer > Layout > Primary Navigation and add your "Menu" label to the Mobile Menu Label field.

Awesome! Thanks again!

BTW, support for GeneratePress is awesome! If you need a review, I'm happy to make one! 😊

Glad to hear that!
If you want you can leave a review over at wordpress.org:

https://wordpress.org/themes/generatepress/