[Resolved] Header Widget Positioning

Home Forums Support [Resolved] Header Widget Positioning

Home Forums Support Header Widget Positioning

  • This topic has 10 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1968977
    Brent

    Hi Guys –

    I’ve got 2 header widgets stacked, which is how I’d like them. However, I’d like the position to be in the upper right-side header, above the navigation. Right now they are floating to the immediate right of the navigation. Can you help me with the CSS?

    Thanks

    #1969050
    Ying
    Staff
    Customer Support

    Hi Brent,

    In this case, can you try using Top bar widget instead of Header widget?

    Let me know if that works πŸ™‚

    #1969051
    Brent

    When I tried that – it’s putting one of the widgets on the left side. I’d like them to look just like they do now, just above the nav. Any idea why it won’t stack the 2 widgets, both on the right side?

    Thanks!

    #1969067
    Ying
    Staff
    Customer Support

    Can you keep them in the topbar widget? So we can help with some custom CSS πŸ™‚

    #1969076
    Brent

    For sure. Thanks!

    #1969122
    Ying
    Staff
    Customer Support

    Try this CSS:

    body .top-bar .inside-top-bar {
        flex-direction: column;
        align-items: flex-end;
    }

    I noticed you have 3 empty widget blocks in the Topbar area, if there’s no specific reason, I think it’s better to get them removed πŸ™‚

    #1969604
    Brent

    Hi Ying –

    Thanks! It’s almost there. How do I remove the padding/spacing above the logo on the left? I’d like the logo to be horizontally in line with the icons on the right – or as close as it can be.

    #1969606
    Brent

    If there is not a way to remove the padding/spacing above the logo – if the icons/phone are moved below the navigation – would that solve it?

    Thanks

    #1969804
    David
    Staff
    Customer Support

    Hi there,

    try adding this extra CSS:

    .top-bar {
        position: absolute;
        z-index: 1;
        right: 0;
        top: 5px;
    }

    You can adjust the top: 5px; value to move it down.
    I would suggest increasing the Customizer > Layout > Header > Top Padding to match the top: 5px; value to stop there being any overlap of the widgets and the navigation.

    #1969814
    Brent

    Hi David –

    Perfect! Thank you so much for the assistance.

    #1969826
    David
    Staff
    Customer Support

    Glad we could be of help!
    One thing i would suggest is to increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation. If you currently reduce the width of your browser you will see on narrower screens the menu runs to two lines. Increasing the mobile menu break point will resolve that.

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