[Resolved] Move the search icon to the header?

Home Forums Support Move the search icon to the header?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1253120
    kiant123

    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

    #1253201
    David
    Staff
    Customer Support

    Hi there,

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

    #1253222
    kiant123

    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.

    #1253284
    David
    Staff
    Customer Support

    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;
        }
    }
    #1253337
    kiant123

    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!

    #1253348
    David
    Staff
    Customer Support

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

    #1253366
    kiant123

    Perfect!

    Thanks for everything!

    #1253694
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.