[Support request] Adding the search-icon inside of the off-canvas panel

[Lars]

Hi

I have decided to put the search icon on display:none; in mobile view but would like to have it shown inside of the off-canvas panel instead, if possible. The icon activates an overlay search field which is an elegant solution for both desktop and mobile that David once helped me with: https://ny.nordfro.se

Thank you for your great support.
Lars

[David]

Hi there,

that becomes tricky, as it would mean closing the off canvas and then firing the script to open the search form. And reseting any classes added by those scripts… simply put, i don’t have a solution for that and personally its not a terribly nice UX having to open the off canvas to then open the search….

How about using the Overlay option in the Customizer > Layout > Off Canvas so the canvas fills the entire screen, and then hook in the custom search form inside that.

Heres a snippet to do that:

add_action('generate_after_slideout_navigation', function(){
	printf('
        <form method="get" class="ofc-search-form search-form navigation-search nav-search-active" action="%1$s">
            <div class="search-form-container grid-container">
		<span class="search-title">Search...</span>
		<input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
		<span class="search-item menu-item-align-right"><a aria-label="%4$s" href="#">%5$s</a></span>
            </div>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
	esc_attr__( 'Close Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true )
  
    );
});

It should pickup your existing CSS styles, but may need some tweaking.

Let me know

[Lars]

Thank you for your suggestionen, David. At this point that will be too much of a design change overall. I want the off-canvas panel to do slideout as it does at the moment. Hmm… any other idea?

[David]

What if the Off canvas still slides out but covers 100% of the viewport ?
This CSS should do that.

#generate-slideout-menu.offside {
    width: 100%;
}
#generate-slideout-menu.offside--right {
    left: auto;
    right: -100%;
}
#generate-slideout-menu.offside--right.is-open {
    transform:translate3d(-100%, 0, 0)
}

Theres also a Hook above its menu, if you wanted to hook in the site logo.

Let me know

[Lars]

It’s leading somewhere. Maybe I can make it slide out just a little bit further than the original, but not 100%?

[David]

Try this, change the 3 x instances of 300px to adjust its width

#generate-slideout-menu.offside {
    width: 300px;
}
#generate-slideout-menu.offside--right {
    left: auto;
    right: -300px;
}
#generate-slideout-menu.offside--right.is-open {
    transform:translate3d(-300px, 0, 0)
}

[Lars]

Great! I added the search widget inside of the off-canvas panel widget area and designed it to my liking. I think the result is splendid. Thanks for the input and the inspiration.

Another question of the subject, do you notice how the float menu isn’t working on the mobile version of the website, do you know why?

[David]

Looks great 🙂

Can you explain the float menu ? Do you mean when hovering over a menu item to view the sub menu ?

[Lars]

Here’s an image of the customizer in regards to that option: https://ahh.nu/shared/navigation.png

In Swedish, that’s why I didn’t come up with the right words, I guess.

Sticky navigation? That’s it!

[David]

Aah i should have guessed that 🙂

Go to Customizer > Layout > Header, and enable it under Mobile Header.

[Author]

Posts