[Resolved] Move top widgets right above nav bar

Home Forums Support Move top widgets right above nav bar

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1490693
    Nadine

    Hi,
    I am trying to add 2 widget areas right above my nav bar, float right of the logo. I am using the Widgets Shortcode plugin to add the widget areas using a hook ‘generate_before_navigation’ – but it’s putting it next to it instead of right above.
    Thanks

    #1490796
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try adding them as header widgets first?

    Let me know πŸ™‚

    #1490827
    Nadine

    I switched it to the header widget and they are on the same line as the nav, not above.

    #1491120
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This can be done, but it takes a little tweaking:

    First, add this PHP:

    add_action( 'wp', function() {
        remove_action( 'generate_after_header_content', 'generate_do_header_widget' );
        add_action( 'generate_before_navigation', 'generate_do_header_widget', 20 );
    } );
    
    add_action( 'generate_before_navigation', function() {
        echo '<div class="primary-navigation-wrapper">';
    }, 15 );
    
    add_action( 'generate_after_navigation', function() {
        echo '</div>';
    } );

    Then add this CSS:

    .nav-float-right .primary-navigation-wrapper {
        margin-left: auto;
        text-align: right;
    }
    
    @media (max-width: 768px) {
        .primary-navigation-wrapper {
            flex-basis: 100%;
        }
    }

    Let me know πŸ™‚

    #1495431
    Nadine

    Perfect, thank you so much!

    #1495434
    Nadine

    Sorry, thought it was resolved, but then I changed the 2nd top widget to social icons and the ended up below the search bar.

    #1495698
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site so we can see the issue?

    #1495706
    Nadine

    Sorry, thought you had it from my earlier post. I added it to the private info.

    #1495821
    Leo
    Staff
    Customer Support

    Try this CSS:

    .header-widget {
        display: flex;
    }
    #1495833
    Nadine

    thank you!!

    #1495853
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.