[Support request] How to control location of search?

[generatepressiscool]

See: https://ahrefs.com/blog/

The search icon shows between signup and product.

1) How to do this in generatepress?

2) How to style the search bar the same way when you click on search?

[Fernando]

Hello there,

Can you share the link to the site where you want this applied?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

We’ll recommend what CSS is needed to try and replicate it.

[generatepressiscool]

Thanks!

[Fernando]

I see. You need to go to Appearance > Menus and delete the Contact button menu item.

Then, create a Block Element – Hook. Hook it to menu_bar_items.

Create the Contact button through a GB Button Block: https://docs.generateblocks.com/article/buttons-overview/

Then, add this through Appearance > Customize > Additional CSS:

span.menu-bar-item.search-item {
    order: -1;
}

[generatepressiscool]

Thank you, that works.

Only problem now is that the button and signup don’t show inside the menu on mobile (they keep showing in the navigation bar).

How to fix that?

[Fernando]

I see. Can you re-add the Navigation Menu and give it a class of menu-contact.

Then add this CSS as well:

@media (min-width: 769px) {
.menu-contact {
 display: none !important;
}
}

Then, add hide-on-* classes to the Button in the Block Element as instructed here: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[generatepressiscool]

Sorry – can you give me the full instructions starting from scratch?

It’s a bit confusing now 🙂

[David]

Hi there,

1. Go to Appearance > Elements.
2. the default Element Type will be Hook:

https://docs.generatepress.com/article/block-element-hook/

Leave as that.

3. Set the Hook to: menu_bar_items

4. Set the Priority to: 30

5. Set the Element Display Rules -> Location to: Entire Site

6. in the element editor, add your Button

6.1 With the button selected in Advanced > Additional CSS Class(es) add: hide-on-mobile

7. Publish the element.

Once thats done we can talk about adding the button inside the mobile menu.

[generatepressiscool]

Thank you, and that works great!

1. How to add this button to the mobile menu? I would like it to show at the bottom of the menu, like at https://ahrefs.com/blog/

2. How to style the search bar the same way when you click on search at https://ahrefs.com/blog/ ?

[Fernando]

1. Repeat steps 1-7(except 6.1) of David’s instruction with a new Block Element, but for step 3, set the hook to inside_mobile_header instead.
2. Let’s proceed with this after 1 is finished/

[generatepressiscool]

Thanks. This doesn’t seem to work.

I did this

1. Go to Appearance > Elements.

2. Create new block.

3. Set the Hook to: inside_mobile_header

4. Set the Priority to: 30

5. Set the Element Display Rules -> Location to: Entire Site

6. in the element editor, add the Button

7. Publish the element.

The mobile menu (hamburger) doesn’t show the button.

[David]

Scrap that.
What type of menu do you have on mobile ? Is it the regular drop down ?

[generatepressiscool]

We use the “SEARCH” theme at https://generatepress.com/site-library/

It’s the same mobile menu we use from that theme.

[Fernando]

I see. If you just want to add it to the Off Canvas Panel of Search Template, you can add the Button through Appearance > Widgets > Off Canvas Panel.

[generatepressiscool]

Thanks that works. Let’s stop here for now. I’ll contact you if I need more help.

[Author]

Posts