Suggestion for improvement: place header icons on both sides of Logo

[gbruzzo]

Here is a suggestion : could you allow in future for groups of header icons to be located both to the left and to the right of the logo in a mobile setup?

for example : the hamburger on the left and the search and maybe the cart on the right?

Please let me know your thoughts

Kind regards

Giacomo Bruzzo

[black-eye]

+1

[mapsteps]

I think this requires an additional mobile menu variation.

Centerd Logo with specific items on each side. Is that what you're looking for?

[gbruzzo]

That would be the idea

left hamburger and right search or right cart

[mapsteps]

I'm exploring some options here but I'm not sure if this is going to work out.

Right now, users can add multiple elements to the mobile navigation bar (search icon, shop icon & even add their own content/icon through the available hooks). This will cause issues on mobile devices if we don't break at a certain level. And, I'm not sure how that's going to look.

On the hamburger & off-canvas mobile menu, users can resize the logo area to make room for these icons. Unfortunately, this is not going to work the same.

The only thing I can think of is that we show the Hamburger on the left, logo in the middle & search on the right with no options to change that. Not sure if that's a great idea though.

[gbruzzo]

Hi there

I can see the full cart with info is a problem (it would be in most contexts, the only way is to have some dropdown etc. But I digress)

Your intermediate image is indeed what I am after, yes.

[mapsteps]

I don't think there's a perfect way to do this.

Here's how you can add the menu from the second screenshot manually.

Add the following filter to your child-theme's functions.php to add the "Centered" menu to the mobile navigation dropdown:

/**
 * Add Centered Mobile Menu
 */
add_filter( 'wpbf_mobile_menu_options', function( $choices ) {

    $choices['menu-mobile-centered'] = 'Centered';

    return $choices;

});

This will allow you to select it in the WordPress customizer

Then, save the code below to inc -> template-parts -> navigation -> menu-mobile-centered.php in your child theme.

<?php
/**
 * Mobile Menu - Centered
 *
 * @package Page Builder Framework
 * @subpackage Template Parts
 */

// exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) exit;

?>

<div class="wpbf-mobile-menu-centered wpbf-hidden-large">

    <div class="wpbf-mobile-nav-wrapper wpbf-container">

        <div class="wpbf-menu-toggle-container wpbf-1-4">

            <button id="wpbf-mobile-menu-toggle" href="javascript:void(0)" class="wpbf-mobile-nav-item wpbf-mobile-menu-toggle wpbff wpbff-hamburger" aria-label="<?php _e( 'Site Navigation', 'page-builder-framework' ); ?>" aria-controls="navigation" aria-expanded="false" aria-haspopup="true" role="button">
                <span class="screen-reader-text"><?php _e( 'Menu Toggle', 'page-builder-framework' ); ?></span>
            </button>

        </div>

        <div class="wpbf-mobile-logo-container wpbf-1-2">

            <?php get_template_part( 'inc/template-parts/logo/logo-mobile' ); ?>

        </div>

        <div class="wpbf-search-icon-container wpbf-1-4">

            <?php echo wpbf_search_menu_item( $is_navigation = false, $is_mobile = true ); ?>

        </div>

    </div>

    <div class="wpbf-mobile-menu-container">

        <nav id="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" aria-labelledby="wpbf-mobile-menu-toggle">

            <?php wp_nav_menu(array(
                'theme_location' => 'mobile_menu',
                'container'      => false,
                'menu_class'     => 'wpbf-mobile-menu',
                'depth'          => '3',
                'fallback_cb'    => 'wpbf_mobile_menu_fallback'
            )); ?>

        </nav>

    </div>

</div>

To make it look pretty, let's add a little bit of Custom CSS:

.wpbf-mobile-menu-centered .wpbf-mobile-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.wpbf-mobile-menu-centered .wpbf-mobile-logo {
    text-align: center;
}

.wpbf-mobile-menu-centered .wpbf-menu-toggle-container {
    text-align: left;
}

.wpbf-mobile-menu-centered .wpbf-search-icon-container {
    text-align: right;
}

Done! :)

[gbruzzo]

Very cool, thank you, will test this immediately.

[mapsteps]

There's actually one me thing we need to do.

• copy mobile-hamburger.js from assets -> js (parent theme) to the js folder in the child theme
• re-name the js file to mobile-centered.js
• on line 105, replace wpbf-mobile-menu-hamburger with wpbf-mobile-menu-centered
• add the following code to the wpbf_child_scripts function in the child-theme's functions.php

// Centered Mobile Menu
wp_enqueue_script( 'wpbf-mobile-menu-centered', WPBF_CHILD_THEME_URI . '/js/mobile-centered.js', array( 'jquery', 'wpbf-site' ), WPBF_CHILD_VERSION, true );        

[gbruzzo]

1. It all works, many thanks
2. I will try it with a new offcanvas, willl need to rewrite an offcanvas left to right js
3. is there any way to retain control of the icons (size and colour? probably not)
4. As it is, it seems to not play well with the current offcanvas (selecting offcanvas as a menu again, results in the offcanvas not sliding out.

As soon as I have a moment, I will look at it in detail. Many thanks in any case, it's great.

Giacomo