How to Make Secondary Header Search Box Bigger in Extra Theme

by | Last updated Oct 28, 2024 | Extra Theme Tutorials

Make Secondary Header Search Box Bigger in Extra Theme

In the secondary header of the Extra Theme, there is an option of using a search box. The search box is fixed in size and may be too narrow for some sites, especially where a user has to search for long words or phrases.

There is no customization option to increase the size of the search box. You can increase the size of the search box using the following CSS:

/* Set the secondary header search bar width */
.et-top-search .et-search-field { width: 200px !important; }

In the WordPress dashboard, go to Divi > Theme Options > Custom CSS to paste the above code. Click on the “Save Changes” button to save the custom CSS code.

Pro Tip: How to Add CSS Code Snippets to the Divi Theme

Make the Secondary Header Search Box Bigger

I hope that you enjoyed this post. Subscribe to Divi Banks on YouTube and join our newsletter for more crisp content on WordPress and web design.

Shop Divi Products

Buy nicely done Divi Layouts, Child themes, and extensions for your next Divi project.

Visit Shop

Related Articles

How to Center Align Archive Titles in Extra Theme

How to Center Align Archive Titles in Extra Theme

In Extra Theme, the titles of the archive pages (author pages, category pages, search results pages, tag pages, etc), are by default left-aligned. You can center align archive titles in Extra theme with the helps of just a few lines of CSS code. All you have to do is...

How to Add Author Image to The Bio Box in Extra Theme

How to Add Author Image to The Bio Box in Extra Theme

The Extra Theme's author bio box is a perfect way to give your readers a little snippet about who wrote each post. But what if your smiling face isn't showing up in that box? Annoying, right? Here's the thing - the author's image comes from Gravatar. Gravatar hooks...

How to Center Footer Links in Extra Theme

How to Center Footer Links in Extra Theme

If you are looking for a quick and easy way to center footer links in Extra Theme, you have come to the right place. To center the footer links including the copyright notice, use the following CSS:#footer-info { width: 100%; margin:0 auto; text-align: center...

Leave a Comment

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

WP101 - FREE WordPress Tutorials

Enter your email address below to gain access to the FREE WordPress training.

You have Successfully Subscribed!

Pin It on Pinterest