[Resolved] Add Widget to Header inline with Menu

Home Forums Support [Resolved] Add Widget to Header inline with Menu

Home Forums Support Add Widget to Header inline with Menu

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2153886
    Krempel & Co. Werbeagentur

    Hello!

    I’d like to create a header looking like this:
    Header I'd like to achieve

    1/3 – Text (via Widget) showing opening hours
    2/3 – Logo + Menu

    I followed this tutorial to center the logo and put the menu items to the right: https://docs.generatepress.com/article/centering-logo-navigation/

    I tried editing the Header Widget and Top Bar widget. But none of those was really what I wanted. (Header widget puts the text on the right side, how do I move it over to the left?)

    I hope there is a easy solution to this πŸ™‚

    Regards,
    Maurice

    #2153972
    David
    Staff
    Customer Support

    Hi there,

    if you can remove any custom CSS you added so far. And can you share a link where i can see the header with your logo / menu and header widget ?

    #2153976
    Krempel & Co. Werbeagentur

    Hello David, thank you for your quick response.

    I have removed the custom CSS having an impact on the header.
    I included a link for viewing the page in the private information.

    Thanks!

    #2154001
    David
    Staff
    Customer Support

    Try adding this CSS:

    /* move widget to first in flex row */
    .nav-float-right .header-widget {
        order: -1;
        margin-left: 0;
    
    }
    /* Force navigation and widget to fill equal space */
    .nav-float-right .header-widget,
    .nav-float-right #site-navigation {
        flex: 1 0;
    }
    /* force navigation to align right */
    .main-navigation .inside-navigation {
        justify-content: flex-end;
    }
    /* Give logo a litte space around */
    .site-logo {
        margin: 0 10px;
    }
    #2154015
    Krempel & Co. Werbeagentur

    That seems to work out fine! Thank you David! πŸ™‚

    #2154198
    David
    Staff
    Customer Support

    Awesome – you just need to consider what happens at smaller screen sizes – so you will need some @media queries

    Glad to be of help

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