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.
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;
}