[Resolved] navigation and widget not vertically aligned?

Home Forums Support navigation and widget not vertically aligned?

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1103155
    Carsten

    Hi there, why are the navigation and the widget not vertically aligned as you would expect, but the nav is instead below the widget?

    View post on imgur.com

    View post on imgur.com

    Regards
    Carsten

    #1103171
    Carsten

    What I want to achieve is this, a slim line header, with back widget and nav in line both on desktop and mobile:

    View post on imgur.com

    #1103636
    David
    Staff
    Customer Support

    Hi there,

    the Header Widget sits within the Site Header container as does the primary navigation, hence the elements stack.

    Instead of using the header widget, you can do the following:

    1. Add New Hook Element
    https://docs.generatepress.com/article/hooks-element-overview/

    2. Add you button to the content with a CSS Class eg.
    <a href="#" class="navigation-button">Label</a>

    3. Select the inside_navigation hook
    4. set your Display Rules to entire site.

    5. Add this CSS:

    .inside-navigation {
        display: flex;
        align-items: center;
    }
    .navigation-button {
        margin-right: auto;
    }
    #1103682
    Carsten

    Hi David, thank you.

    Quite a process to achieve this, is this something you would concider to implement to GP?, I think many would ask for this slim compact header app like design for mobile.

    Regards
    Carsten

    #1103705
    David
    Staff
    Customer Support

    We do get quite a lot of requests for adding custom elements to the navigation. The hang up is the requests vary quite considerably and we have yet to find a solution that covers enough bases to warrant a new feature…. this is where the Hook Element really does shine.

    But we are still looking 🙂

    #1103716
    Carsten

    Yes I understand, I can only imagine the amount of requests you are receiving every day. Header and navigation are really difficult to get right, but it must be possible to make some kind of grid for the header and top bar, to avoid something like this, which does not make sense.

    View post on imgur.com

    View post on imgur.com

    Leo has answered that this must be a css conflict with the plugins, it might be, but you would expect the design to be more logic and better out of the box.

    #1103735
    Carsten

    With these settings, and my poor css skills, I manage with flex to have the back button widget and the navigation almost in line in header.
    What I need now is to have the nav menu to float right. This is not the right way of doing this, I know, when I scroll down the back button disappears and the nav is centered again.

    View post on imgur.com

    View post on imgur.com

    But just to demonstrate, that by build in a little more tools and options in the customization of the header would solve a lot of requests I think.

    #1103760
    David
    Staff
    Customer Support

    The header widget was never designed to sit in-line with the Navigation. Only in line with the Site Identity. The markup used to build the site header is not conducive for this type of layout and changing it to make it so would break backwards compatibility and potentially break a lot of sites.

    Further to this we have to consider the direction that WP is taking and how the block editor will become more entwined with theme editing. So much so we had to pull our latest Elements module from the last update that would make this sort of thing simpler.

    The simplest solution today is the steps i provided earlier.

    #1104542
    Carsten

    Ok, I will use the top bar for my widgets instead.
    If my Top Bar Alignment is set to Left, the two widgets are centered on mobile, please explain why this is happening?
    How do I get the widgets aligned left, and even better, the Back Button widget aligned left, and the ‘New Messages’ widget centered? Thanks

    Regards
    Carsten

    Desktop

    View post on imgur.com


    mobile

    View post on imgur.com

    settings

    View post on imgur.com

    View post on imgur.com

    #1105115
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Should only require a little bit of CSS – your site seems to be password protected, any way you can share the password with us?

    Let me know 🙂

    #1105153
    Carsten

    Credentials have been sent by mail

    Password: buddydev

    #1105333
    Tom
    Lead Developer
    Lead Developer

    I’m only seeing the one widget in the Top Bar area right now.

    To stop them from centering, try adding this CSS:

    @media (max-width: 768px) {
        .top-bar.top-bar-align-left, 
        .top-bar.top-bar-align-right {
            text-align: left;
        }   
    }
    #1105596
    Carsten

    Hi Tom, thanks for the code, it aligned all the widgets to the left.

    Optimally I want the two widgets, either to align left/center, or left/right.

    To see the top bar with two widgets active, please ty to login again as ‘jette’, password ‘alfa’

    #1106076
    Tom
    Lead Developer
    Lead Developer

    What if you just add this?:

    a.yhanm {
        float: right;
    }
    #1106090
    Carsten

    Thanks, that’s looks much better, what if I instead want the second widget centered?

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