[Resolved] How to change the search bar animation?

[Ravi Dixit]

I want to customize the search bar animation by default to something like this https://prnt.sc/ok8cly

As it is covering the whole screen, I want the same for desktop and mobile view as well.

And how can I align my search icon at the end of the right side? I also want to remove the Menus text from the mobile navigation menu,
Only want to show three lines.

Please help with this and thanks in advance.

[Leo]

Hi there,

The full-screen search will require a considerable amount of custom coding for now unfortunately.

We are considering adding this as a future feature though.

This should work for the navigation search position:

.main-navigation li.search-item {
    position: fixed;
    right: 0;
}

The mobile menu text can be removed in the customizer:
https://docs.generatepress.com/article/mobile-menu-label/

[Ravi Dixit]

Hey, LEO!

Your CSS is working only for Desktop but I don’t want to adjust the desktop search icon. Instead, I want to align right for mobile view.

See the screenshots: https://prnt.sc/oknhov and https://prnt.sc/oknhsr

I want to customize the search bar because maybe you remember we have removed the Background current and hover colour from primary navigation so this is how search bar is working now: https://prnt.sc/okniuc

Here is the link of the website that is using the full-screen search bar and it is also using Generatepress.

[Tom]

It doesn’t look like the link to the full-screen search came through – can you double-check?

[Ravi Dixit]

I am really sorry, I forgot to give a link… Here it is masterblogging.com

[Leo]

The site is using GP but the header, footer, navigation search are all coming from Elementor unfortunately.

The only GP element on that page I can see is the back to top button.

[Ravi Dixit]

Ok, thanks for the help…

But my website’s search bar is not showing any background colour as you know we have removed them…

Now it is not looking good.

[Leo]

What if you try this CSS?

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

[Ravi Dixit]

Thanks, Now it is looking good.

[Leo]

No problem 🙂

[Mirza Sulaiman]

Hello, my search icon is taking the whole navigation menu during clicking on the search icon. Could u please help me out with this.
Thank You

[David]

Hi there,

can you raise a new topic where you can provide a link to your site in the Private Information.
And explain how you would like it to look.

[Mirza Sulaiman]

The following is the link
https://scriptwithme.com/
problem with the search bar in the navigation menu.
Thank You.

[Elvin]

Hi Mirza,

As David mentioned, can you open up a new topic? It’s helpful incase we need to ask you for anything that may require the Private Information textarea.

Here’s how to open a new topic for support.
https://docs.generatepress.com/article/using-the-premium-support-forum/#open-support-topic

Thanks. 🙂

[Author]

Posts