[Resolved] Centre logo with widgets to the right and left

Home Forums Support [Resolved] Centre logo with widgets to the right and left

Home Forums Support Centre logo with widgets to the right and left

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1644884
    Raielene

    My client would like his logo in the middle with a widget on the right and left sides. Is there a way to do this?

    #1644949
    Leo
    Staff
    Customer Support

    Hi there,

    Are you wanting this part to be on the left of the logo?
    02.03.2021-18.20.27

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

    Let me know πŸ™‚

    #1648611
    Raielene

    Done!

    #1655023
    Raielene

    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?

    #1655098
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1665115
    Raielene

    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?

    #1665142
    Ying
    Staff
    Customer Support

    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;
        }
    }
    #1666046
    Raielene

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

    #1666908
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

    #2109104
    Raielene

    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?

    #2109249
    Elvin
    Staff
    Customer Support

    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;
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2116241
    Raielene

    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.

    #2116831
    David
    Staff
    Customer Support

    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.

    #2117082
    Raielene

    Awesome! Thanks again!

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

    #2117112
    David
    Staff
    Customer Support

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

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

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.