Menu bar items are forced to the side

Hi there,

we can move the menu bar icons back inside the primary nav, but that will cause the menu to be off balance ie. the menu items to the right will be wider than on the right.. which makes it a pain to center.

So try this>

1. remove the negative right margin CSS you have added.
2. Add this CSS:

@media(min-width: 769px) {
  .main-navigation .inside-navigation:before {
    content: '';
    display: block;
    flex: 1;
  }
  .main-navigation .menu-bar-items {
    flex: 1;
    justify-content: flex-start;
  }
}

Its not perfect - on wider screens the Cart/Search will still move to the right but it will keep the menu balanced.

Thanks David. It looks good enough and I can work with it. But I have an idea that it would be possible to insert them as objects in the menu, no?

Edit: Or maybe insert them in the top bar or somewhere else? With a hook, perhaps? (learning a bit about hooks right now)

How about making them actual menu items? Isn’t that possible?

I'm going a bit deeper with my custom menu. Thanks for all the help.

The aim now is to split it more clearly to get the logo visually free on either side. Like this. Is it possible?

And:
1. Can I have search item and woo-item as menu items, so that they don’t run off?
2. And/or can I have search item and woo-item in the top bar? (widgets?)

I read this from Tom. Is that a solution for me?

In my before-mentioned link to something Tom had written I have now made a menu accordingly. It needs some extra tweaking for good looks but the general structure is set. Thanks for not answering me! I am actually honest about that. Since it gave me some motivation learn the things myself.

Check out: https://new.teaboytea.com for the results.

See you soon again! ;)

Sorry for not getting back to you sooner here.

Looks great! Let me know if you do end up needing the code to re-add them as menu items :)

No worries man, you guys are surely super busy.

But, yes, please! Share the code.

For the cart menu item, this should do it:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

add_filter( 'wp_nav_menu_items', function( $items, $args ) {
    if ( 'primary' === $args->theme_location ) {
        $has_items = false;

        if ( ! WC()->cart->is_empty() ) {
            $has_items = 'has-items';
        }

        return sprintf(
            '%1$s
            <li class="wc-menu-item menu-item-align-right %3$s %4$s">
                %2$s
            </li>',
            $items,
            generatepress_wc_cart_link(),
            is_cart() ? 'current-menu-item' : '',
            $has_items
        );
    }

    return $items;
}, 10, 2 );

And for the Navigation Search:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
} );

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
    if ( 'enable' !== generate_get_option( 'nav_search' ) ) {
        return $nav;
    }

    if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
        $search_item = apply_filters(
            'generate_navigation_search_menu_item_output',
            sprintf(
                '<li class="search-item menu-item-align-right"><a aria-label="%1$s" href="#">%2$s</a></li>',
                esc_attr__( 'Open Search Bar', 'generatepress' ),
                generate_get_svg_icon( 'search', true )
            )
        );

        return $nav . $search_item;
    }

    return $nav;
}, 10, 2 );

Hope this helps!

Thanks for taking the time with me. Much appreciated!

No problem! :)

You wouldn't recommend to use scripts like these, right? I get the feeling that they are cumbersome for the site.

Those scripts are perfectly fine to use, they are no different to what WP and the Theme is doing when it comes to outputting elements to the page.

Let us know if you need any assistance with the layout.

I think you can teach me something here. Sometimes I see you say that adding scripts (of some kind) is not a good solution. Is it JavaScript that you refer to? Could you elaborate on this issue?

Theres good code and bad code in all languages. But theres also code that is best suited to the job at hand.

In this instance, we need to remove those elements from the Menu Bar Container to the Navigation Menu. As this requires changing the HTML that is output to the page, we need to make those changes to the Theme Templates. Great news here is we can do that with Hooks ( actions and filters ) :)

This means the correct HTML gets output to the browser.

Whereas this could be done with Javascript - that would mean first outputting the 'wrong' HTML, then run some JS in the browser to manipulate that output. Aside of it putting the burden on the Browser to do the work, it means there will be an instance where the incorrect HTML is loaded, and then the JS corrects that.... which is a bad solution in this case