Styling the Divi Slide-in Menu

|

The Divi theme includes several header menu layouts, including a slide-in menu. The slide-in menu is a bit of a mash-up of the top header, main menu and mobile menu, so while Divi Booster doesn't have a specific section of slide-in menu settings (yet), some of its header settings targeting these components can also be used on the slide-in menu. These include:

Social media icons

If you enable social icons at:

Divi > Theme Customizer > Header & Navigation > Header Elements > Show Social Icons

Then you can use the extra social icons added by Divi Booster at:

Divi > Theme Customizer > Divi Booster > Social Media Icons

There are around 250+ icons available, including LinkedIn.

You can also configure these icons to open in a new tab at:

Divi > Divi Booster > Site-wide Settings > Icons > Open social media icon links in a new tab

Additional text

Divi Booster includes an option to add text to the top header. This text will also show in the slide-in menu. You can set it at:

Divi > Divi Booster > Header > Top Header > Add text to top header

Make phone number a click-to-call link

Divi Booster lets you make the phone number clickable, and this will work in the slide-in menu too. Set it at:

Divi > Divi Booster > Header > Top Header > Make phone number a "click to call" link

Menu link hover color

You can set the hover color of the menu links in the slide-in menu at:

Divi > Divi Booster > Header > Main Header > Menu link hover color

Change the slide-in menu font size

The Divi Booster option to set the mobile menu font size will also set the font-size on the the slide-in menu. You can set it at:

Divi > Divi Booster > Header > Mobile Header > Mobile menu font size

Make slide-in menu top level items into links

This isn't in Divi Booster as yet, but I've also written an article on how to make the slide-in menu top level items into links.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.