[Resolved] Navigation Search issues

[Q]

Hi There,

I have an issue regarding the GeneratePress Navigation Search.

Would it be possible to have the search open like the search I created in the top grey menu bar using Elementor (which opens over the whole page). http://a2i.qnsmedia.com/home-3

or

A search which opens a line below the menu bar. https://hiphopdx.com/

I have created a menu bar in GeneratePress that works as you stated on the site “When you click it, a semi-transparent search bar covers your menu items and allows you to enter a term to search your site”, but there is no semi-transparent search bar that covers my menu items. This is the second menu bar on http://a2i.qnsmedia.com/home-3.

I will use this method if I have to, and if I can fade the menu items as I don’t want to see the menu items when having to search, but really looking for another method like the two above.

Regards and a Happy New Year
QNS

[Leo]

Hi there,

Give this a shot: https://generatepress.com/forums/topic/inside-navigation-search-drop-below-like-twenty-fourteen-theme/#post-314487

Let me know.

[Q]

Hi Leo,

Sorry for the late reply. I have implemented the code you suggested.

It does work but does not achieve the effect I need, as all you see is a cursor on the line below, is it possible to style that area so it can be seen that area is a search area and could there possible be some placeholder text which has the text ‘Search’ in there.

Thanks again
Q

[Leo]

You can change the color with this CSS:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
    color: #ffffff;
    background-color: #222222;
}

See second example for text: https://docs.generatepress.com/article/generate_navigation_search_output/

[Q]

Hi Leo,

The first example does not seem to work, I still just see the cursor, it’s a bit strange if I hold down the x icon after click the search for a few seconds, then the background color seems to appear.

The second example for the text works

Thanks again
Q

[Leo]

Can you try the edited code above?

Let me know.

[Q]

Hi Leo,

Great, that worked.

Thanks for the fix.
Q

[Leo]

No problem!

[Author]

Posts