[Resolved] Text of search bar is displaying under my logo

[David]

Hello team! 🙂

1st question:

I’m working on a new site with WooCommerce. The search icon are active. But… when I’m writing on it, the text appears under the logo. Why?

2nd Question:

When I click to the search icon, I can’t see any visual change (for example, a light-grey background on the search bar). It is possible to make any change with that?

Thank you!

[Leo]

Hi there,

1. Try this CSS and adjust the number as you see fit:

.navigation-search input {
    width: 85%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

2. Try the options in Customizer > Colors > Primary Navigation > Navigation Search.

Let me know if this helps 🙂

[David]

Hi Leo!

The color settings are OK! Nice 🙂

But the CSS code it don’t work well.

The search box should open (start) between the menu (“contact”) and the magnifying glass icon.

Another option to add in future versions … is that when you click on the search button, the text box opens in full screen (with the black background with transparency). The same option that can already be done with the menu in mobile.

I am attaching a sample image with the current provided CSS code applied.

https://ibb.co/LxKSdvC

Thank you!

[Leo]

I’m not seeing my CSS being added.

Can you add it so I can see the issue?

[David]

Hi Leo! The code is active now. The website is diana.cloud

Thank you

[David]

Hi there,

try adding this CSS instead:

.navigation-search.nav-search-active {
    max-width: 360px;
    left: auto;
    right: 90px;
}

And the color change can be made as Leo explained:

2. Try the options in Customizer > Colors > Primary Navigation > Navigation Search.

[David]

It works! Thank you so much GP Team 🙂

[David]

Glad we could be of help

[Author]

Posts