[Resolved] Menu bar items are forced to the side

Home Forums Support [Resolved] Menu bar items are forced to the side

Home Forums Support Menu bar items are forced to the side

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1647872
    Lars

    I’m using the Split theme as a starting point. I want the menu-bar-items (search icon and shopping cart icon) to fit next to the most right menu item. But they are being forced to the side by something that looks like a “justify-content: space-between” or similar, but I can’t figure it out. Image for reference.

    I have made some earlier changes to include an overlay search field that might bother the split theme somehow. Since I am also making a small push with a margin you won’t initially see the search icon.

    To see the search icon, remove this: (in inspector/dev-tools)

    .main-navigation .menu-bar-items {
        margin-right: -90px;
    }

    Website: https://new.teaboytea.com

    I have also tried to mention this in an earlier thread:
    https://generatepress.com/forums/topic/moving-search-field-and-icon/#post-1647276

    #1648223
    David
    Staff
    Customer Support

    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.

    #1648256
    Lars

    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)

    #1648478
    Lars

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

    #1648589
    Lars

    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?

    #1649427
    Lars

    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! 😉

    #1649448
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1649511
    Lars

    No worries man, you guys are surely super busy.

    But, yes, please! Share the code.

    #1649524
    Tom
    Lead Developer
    Lead Developer

    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!

    #1649532
    Lars

    Thanks for taking the time with me. Much appreciated!

    #1650690
    Tom
    Lead Developer
    Lead Developer
    #1650769
    Lars

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

    #1651355
    David
    Staff
    Customer Support

    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.

    #1651374
    Lars

    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?

    #1651584
    David
    Staff
    Customer Support

    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

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