Topic: Secondary Navigation Search Styling

curiouslt
May 1, 2025 at 7:06 am

Hi,
I added the search to the secondary navigation using the function in your article. I’m having trouble figuring out how to style it though. When I click on the magnifying glass, it opens a search box, but it has no background and is very hard to see. It also highlights the primary navigation menu, which I don’t want to happen. I would like the background of the search area of the modal to be white and the magnifying glass/button to be green with white icon but i’m not seeing anywhere to do that.
Ying
May 1, 2025 at 9:26 am
Hi there,

You can style the search model colors at customizer > colors > search modal.

The primary nav is built with Elementor, we don’t have control over it, unfortunately! You will need to check with Elementor’s support for this.

For the color of the search button, try this CSS:
```
.search-modal-fields button {
    background-color: green;
}

.search-modal-fields button svg {
    color: white;
}
```
curiouslt
May 1, 2025 at 11:53 am

Thanks so much, that did the trick!
Ying
May 1, 2025 at 1:25 pm

You are welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

Secondary Navigation Search Styling