A TEABREAK TUTORIAL FROM SUPER DIVINE WEB DESIGN

How to add a search bar and (optional) styled button to your Divi main menu in 10 minutes!

I don’t know about you, but the Divi “magnifying glass” search icon on the Main Menu always annoyed me! And I decided to replace it with a search bar that matches in nicely with my website. 

You will need to embrace “Widgets” and “Inspect” Chrome tool. Be brave and have a go – it really isn’t as difficult as you may think.

How to back up your website

Here’s the video! Please let me know how you got on with the instructions? Did you successfully add (and style) your new Search Bar? Email me here with your comments, or pop over to Twitter and say Hello. Trace x

CODE TO ADD TO DIVI THEME OPTIONS CUSTOM CSS BOX

Remember: you need to Right Click mouse for the “Inspect” panel in Chrome to appear – you need to find your custom link unique item number!! Copy that number down and replace my 333457 so your code works!

Use your brand colour palette hex codes for “background”, “color” and “border-color” options.

.menu-item-333457 #searchsubmit {
background: #cebb77;
padding: 2px;
color: #4d2772;
border-radius: 1px;
border-color: #cebb77;
}