Secondary navigation search box not working

Hi there,

Have you activated the secondary navigation first?

I'm not seeing it.

Let me know :)

yes, I have activated secondary navigation first and then I added the snippet. most probably I did something wrong.

Here is the link to screenshots of snippet and secondary nav.. https://drive.google.com/drive/folders/1RCkAopjJpXxjT6t1f-21-aryzDX1csur?usp=sharing

Hmm I'm just not seeing it.

So you've created a menu and assigned it to the secondary navigation?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

No I didn't create any menu, I just want to have the search bar on secondary navigation with search icon on the primary navigation. And I don't want to have any menu on secondary navigation, as more options will make visitors confused.

similar to this site - https://www.thinkwithgoogle.com/

But for some reason, secondary navigation is not showing. I also tried creating a menu for the secondary navigation. but still, it is not visible.

here is the link for the screenshot - https://drive.google.com/file/d/1vVqsz2J8fhh27DNTsGruymt1LF1jHnjC/view?usp=sharing

Can you do this first?
https://www.screencast.com/t/PiB5jZ2woXkl

I'm not seeing the secondary navigation in the example site as well.

What if we just try this CSS with your current setup?

.navigation-search.nav-search-active {
    top: 100%;
}

footer.entry-meta {
display: none;
}

I don't know anything about coding.... do I need to add this on my site by after clicking f12(on windows)?

.navigation-search.nav-search-active {
top: 100%;
}

I tried adding this in the CSS section on customization settings but nothing is happening..

I just tried disabling the PHP snippet. Now the search bar started working again.

Then after adding this

.navigation-search.nav-search-active {
top: 100%;
}

It started working as I want. Now I don't need secondary navigation anymore. So I disabled it.

The CSS here:
https://generatepress.com/forums/topic/secondary-navigation-search-box-not-working/#post-1503792

Should be added using one of these methods:
Adding CSS: https://docs.generatepress.com/article/adding-css/

It should give a similar effect as this site:
https://www.thinkwithgoogle.com/

Okay, thank you very much it is working properly. and I disabled secondary navigation.

Is it possible to create a few tweaks?

AS my background is totally white. It is not visible enough. Is it possible to make it more visible with a box-shadow and a thin underline?

Try this:

.navigation-search input[type="search"] {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

it is working. thank you very much leo....

i am curious about a thing. what is webkit box shadow & moz box shadow ? will you be able to tell me about it?

Those are just browser pre-fix for compatibility.

In my opinion, you don't need them anymore :)

Yeah, i dont need those.... i tried changing the value of webkit box shadow and moz box shadow, but nothing happend thats why i asked. well, thank you very much for your support.

No problem :)