[Resolved] Move the search icon to the header?

[a1reno]

Hi,

I’d like to move the search icon from the primary nav up into the header (to replace the social icons on my site: https://share.getcloudapp.com/L1u7pbvJ). I see that you can put a widget there but I only see the search box available and not the icon.

My plan is to get rid of my primary navigation altogether and just have the header which means I’d like to stick my primary menu into the header as well in the form of an off-canvas menu. I couldn’t see how to do this is this possible too? If possible I’d like to place it just to the left of my logo like this one (https://share.getcloudapp.com/KouqBk9x)

Is it possible to make these changes?

Thanks in advance

[David]

Hi there,

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

[a1reno]

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.

[David]

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;
    }
}

[a1reno]

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!

[David]

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

[a1reno]

Perfect!

Thanks for everything!

[David]

You’re welcome

[Author]

Posts