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

[Reenay]

Hello, I am looking for help with repositioning the header. While I found many relevant topics in the forum, one or two things are missing. 

Specifically, I wanted to achieve the following:

On Desktop –

First, Off-Canvas Button + Logo (on left) – Main Menu + Search Button (on the right)

Same on Mobile –

Off-Canvas Button/Mobile Menu + Logo (on left) – Search Button (on the right)

The current customization settings of the layout section are:

Use Navigation as Header – ‘NO’
Mobile Header – ‘OFF’
Off-Canvas Panel – ‘ON’

I do not wish to use the Mobile Header since it calls an additional CSS file i.e. navigation-branding-flex.min.css

*Using the latest GP theme and premium plugin.

[David]

Hi there,

can you share a link to your site and i can look at whats required.

[Reenay]

Hi David,

Here is the test site link – https://tn.wpdeve.com/

[Reenay]

Hi David,

Any update?

You can also check out the live example of requirements on the main domain i.e. https://wpdeve.com/

Thanx

[David]

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.

[Reenay]

Thanks, David.

I have added the code and also set the priority to 1, now the Off-Canvas Button is starting to appear before the logo.

Pl also look into the rest of the layout for desktop and mobile both.

[Ying]

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 🙂

[Reenay]

Hi Ying,

Thanx for CSS, it is working fine.

However, I just noticed that Main Menu items are not merging with the Off-Canvas menu on mobile.

Ideally, it should. Otherwise, the main menu items will be hidden on mobile.

And, there would be no point of using the Off-Canvas menu on ‘Desktop’, if one has to use the same items as the main menu.

Can you suggest any workaround for that.

P.S. The current theme on the main domain does that flawlessly, check that out.

[David]

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.

[Reenay]

Roger that!

Thank you very much for your help.

[David]

Glad we could be of help!

[Author]

Posts