Move the search icon to the header?

Hi there,

will you be wanting the same layout on Mobile ? Or will you be keeping your current layout. Let me know.

Hi David,

I'll be keeping the same mobile layout. In fact the desktop one will likely have the same components only the menu icon on the desktop would be to the left of the logo.

Lets try this then ( yeah its rather complicated ):

1. enable Navigation as Header in Customizer > Layout > Header

2. enable Off Canvas Panel for Desktop as well as mobile.

3. Create a new menu with NO menu items and assign this to your Primary Navigation. Then only the Off Canvas toggle will appear.

4. Now we need to get the site tag line - so create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
4.1 Add this for its content:
<?php bloginfo( 'description' ); ?>
4.2 Select the after_logo hook
4.3 Check Execute PHP
4.4 Set Display Rules to Entire Site

5. Now add this CSS:

@media (min-width: 769px) {
    .navigation-branding {
        position: absolute;
        left: 70px;
    }

    .main-nav {
        flex: 1 0 100%;
        box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
    }

    .main-nav ul {
        display: flex;
        justify-content: space-between;
    }

    .main-navigation .main-nav ul li.slideout-toggle a {
        padding-right: 15px;
    }
}

Hi David.

That worked really well! One teeny tiny problem is that when I now hover over the new menu something blocks the logo temporarily. Is there a quick fix for this?

Also, I see you replied to my other support question to put a line under the mobile navigation header which I now see I need for the desktop too. What code should I put in to cover both?

Thanks for the help! you seem to be a real wizard with these things!

Edited the CSS above to stop the Toggles from overlapping the logo and to include the border below the nav.

Perfect!

Thanks for everything!

You're welcome