[Resolved] Hook for below (but left algigned to) primary menu

[Bob]

I’m trying to add some content to the header, below the primary nav. It should align left with that. But whenever I try, it’s appearing to the right of the nav itself. I’ve tried add_action( ‘generate_after_primary_menu’,’header_additions’ ); and a few others. If I try putting in a div to clear, it only works if there is some content in that div, which then appears next to the nav.

Is there a hook that will put content in this spot?

[David]

Hi there,

can you share a link to the site where i can see the badly positioned element you have hooked in ?

[Bob]

It’s not at a point where I’m ready to post it (even in demo form). But could you let me know which hook is best to be trying? I have the logo on the left, and nav to the right of it, and want this content to be in that right area (directly below the nav, left-aligned with it). Thanks!

[Bob]

Note: it seems to be ok with generate_after_primary_menu() IF I have the structure setting set to “Floats” rather than “Flexbox”. But I thought it was best to be moving to Flexbox now? Is there perhaps a workaround to get this working correctly while keeping the “Flexbox” setting? I can post an example next week if there is nothing obvious to suggest trying.

[David]

Its one area that Flexbox has its limitations – although we can tell it to wrap to new rows – if you want the Navigation and the Below Element to be centrally aligned with the logo then it gets messy.

If you want to wait till when you can post an example ill be happy to take a look at what can be done.

[Bob]

Here is an example of the layout that I’m looking to do. It doesn’t need vertical centering, just the new content to be immediately below the nav. This is the first site I did where GeneratePress defaulted to Flexbox layout. Is there any danger in setting it back to Floats in terms of future support? The layout is otherwise pretty simple and it seems that the main benefit to use Flexbox is not needing to load the unsemantic grid css.

[Ying]

Hi Bob,

You can try generate_after_primary_menu in flexbox, the added item should be aligned left with the primary menu by default.

When there’s a structure built on your site, we’ll be happy to assist with CSS if it’s needed 🙂

[Bob]

It kind of works now, but it seems like now the nav/new content area is pushing the logo to be smaller!

[Ying]

Give this CSS a try:

@media (min-width: 769px) {
    .inside-header {
        align-items: flex-start;
    }
    .main-navigation .inside-navigation {
        flex-direction: column;
    }
    #header-additions {
        align-self: flex-start;
    }
}

Let me know 🙂

[Bob]

That seems to work – thanks!!

[Ying]

No problem 🙂

[Author]

Posts