- This topic has 15 replies, 3 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
Hi,
I want to insert search into the primary navigation and have appear in all pages ans all devices.
I am not sure I have found the correct documentation as it mentions secondary navigation only?
https://docs.generatepress.com/article/navigation-search/
Can you signpost me to the best method to achieve this?
EDIT:
Forgot to clarify, I want to have the search appear as a rectangle/box area with a grey outline.
On desktop primary navigation:
Logo, Menu, Search box
Mobile:
Logo, Search box, Menu hamburger/toggleCustomer Support
Hi there,
Do you want the navigation search to be activated on your primary navigation?
If so, you just need to enable it at customizer> layout > primary navigation.
Yes, but not just that. I dont want just the search icon to appear but the whole search bar to be visible with the cursor in place. I have added a link below for a similar design , how the primary navigation it should look on scrolling down
Then you can use the WP search block, add it into a block element – hook, choose
menu_bar_itemas the hook name.Hi Ying,
Thank you got it now! Can I ask how may I modify the WP search block beyond its basic settings options?
I am trying to change the background colour when static and then on hover, make its borders more rounded and add a blinking cursor when on standby but can’t get the right css off the internet.
EDIT: I notice there are many plugins improving the native WP search block. Is there anyone that you guys recommend? I am between relevanssi, Ajax search and Ivory..
WP search block is a core block, unfortunately, we don’t have full control over it, but custom CSS should work.
Can you link me to where I can see the search bar?
As for plugins, I don’t use any of them, so no preferences, you can try all of them to see which one works better.
Yes, I have posted the link below:
The search bar appears on scrolling down, it is within the primary navigation menu.
I want the search bar length to take the remaining space within the primary nav menu.Try this CSS:
.menu-bar-items { flex: 1; } .menu-bar-items form.wp-block-search__no-button.wp-block-search { flex: 1; max-width: 99%; } .menu-bar-items input#wp-block-search__input-2 { border-radius: 10px; }for the colors, try customizer > colors > forms.
Hi, the above CSS works well on desktop but partially works on mobile.
On mobile the search abuts the site logo, whereas it overlaps on the right with the hamburger toggle, especially when trying to search. Is there a way to fix this?
Also, is there a way to have a blinking cursor within the menu when standby?
Change this:
.menu-bar-items input#wp-block-search__input-2 { border-radius: 10px; }to this:
.menu-bar-items .wp-block-search__input { border-radius: 100px; }And add this for mobile:
#mobile-header .menu-bar-items form.wp-block-search__no-button.wp-block-search { max-width: calc(90% - 40px); margin-left: 20px; }hi thank you Ying, the mobile prim navigation has snow been sorted, thank you 🙂
I still can’t see a blinking cursor, I am trying to have one appear within the search bar when the bar is idle/not in use, as a constant prompt to use the search.
The first code change, may I clarify what is does?
Customer Support
Hello there,
The first code change just changes the border radius of the Search input box.
As for the Blinking cursor, by default, it only appears when the input box is selected. If it isn’t and you want something like that to appear, you’ll need Javascript code for that I believe. Unfortunately, this would be out of our scope of support.
Oh I see, fair enough, thank you for clarifying that 🙂
You’re welcome!
The concept of the code would be something like the one shared here: https://medium.com/@bharatgupta_2334/how-to-create-blinking-cursor-effect-using-javascript-fad099e8bcb9
You’ll just need to add a conditional statement to check for the “idleness” of the site visitor.
Thank you, will take a look into this 🙂 tbf I am happy how far the search bar design has progress it looks really good now
- You must be logged in to reply to this topic.
