[Resolved] Secondary navigation search box not working

[moy]

I have added a search box in secondary navigation with Code Snippets plugin with the help of the 2 links given below. But the secondary navigation is not working.

https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation
https://docs.generatepress.com/article/adding-php/

Secondary navigation is not visible plus. search option is still showing in the primary navigation. when I am clicking the search option in the primary navigation, it turned into a cross. but the search box is not visible.

Will you be able to help me out? I like to add a search box in secondary navigation.

[Leo]

Hi there,

Have you activated the secondary navigation first?

I’m not seeing it.

Let me know 🙂

[moy]

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

[Leo]

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

[moy]

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

[Leo]

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%;
}

[moy]

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..

[moy]

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.

[Leo]

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/

[moy]

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?

[Leo]

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);
}

[moy]

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?

[Leo]

Those are just browser pre-fix for compatibility.

In my opinion, you don’t need them anymore 🙂

[moy]

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.

[Leo]

No problem 🙂

[Author]

Posts