Where do I override css for top-nav-search ?

[choskins-godaddy]

To summarize: my header is dark and I am overriding the colors in order to do that. The search widget in the nav-bar needs to have a light-colored search button (It is the magnifying glass icon in font awesome) so you can actually see it. As you can see, it has a dark area next to the search text-box instead of the icon:

In my header.php, I see a few sections with "search". One of them was decorated with btn-outline-dark so I changed it to btn-outline-light but that didn't work.

The "Search Toggler" must not be visible because changing to btn-outline-light did not work...

<!-- Search Toggler --> <button class="btn btn-outline-light ms-1 ms-md-2 top-nav-search-md" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search"> <i class="fas fa-search"></i><span class="visually-hidden-focusable">Search</span> </button>

I think it must be here:
<!-- Top Nav Search Collapse --> <div class="collapse container" id="collapse-search"> <?php if (is_active_sidebar('top-nav-search')) : ?> <div class="mb-2"> <?php dynamic_sidebar('top-nav-search'); ?> </div> <?php endif; ?> </div>
So, I need to find the styling for <?php dynamic_sidebar('top-nav-search'); ?>

I did find the same search section in header-wocommerce in bootscore-main and it had btn-outline-dark but I am pretty sure I can't override that part.

Please help!

Thank you so much!

Cindy

[crftwrk]

If you are using the default searchform, simply copy searchform.php from main-theme https://github.com/bootscore/bootscore/blob/main/searchform.php to your child's root and change button class.

Same way for WooCommerce search. Copy woocommerce/product-searchform.php from main-theme https://github.com/bootscore/bootscore/blob/main/woocommerce/product-searchform.php to your child using the same folder structure and edit button class.

Does this help?

[choskins-godaddy]

Thank you, I'll do that. I appreciate you so much!

I wish there were a simpler answer -- styling should be separate theoretically. If they included an ID I could just change it in css.

[crftwrk]

Thank you! id is not possible because searchform is twice on default nav. One on lg and one collapsed on mobile view https://bootscore.me/theme/header-nav-default/.

However, overrides by edit templates in child is the best way. Of course, you can add your own CSS instead, but why?