[Resolved] Reposition Header Item – Mobile /Off-Canvas Button – Logo – Search Button

Tricky one.
First off we’ll need to hook in a custom Off Canvas toggle

Create a new Hook Element:
Add this for the hook content:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>

Then set the hook to generate_before_header_content
Check the Execute PHP and set your Display Rules to Entire Site.

Lets see if we can get that in place first, and that it works. Then we can look at the rest of the layout.

Hi Reenay,

Then you can try add this CSS to customizer > addtional CSS:

@media (min-width: 769px) {
    span.menu-bar-item.slideout-toggle {
    display: none;
    }
}
.main-navigation button.menu-toggle {
    display: none !important;
}
.inside-header > span.slideout-toggle.has-svg-icon {
    margin-right: 20px;
}

And try to modify David’s PHP code to this:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>

Let me know if it works 🙂

Couple of methods:

1. Add the ‘missing’ desktop menu items to your off canvas panel menu. And add the hide-on-desktop class to the menu items CSS Classes:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

2. Use the Off Canvas Panel Widget area to a Navigation Widget.
This will require some CSS to change the order and layout.

I would personally go with #1.

Glad we could be of help!