Search

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_item as 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:

Allinop

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?

allinop.com

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?

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