Customize the top bar (fixed navigation)
- Replace the email field with an address
- Swap Twitter for Instagram
- Add a line of text before the social media icons
- Move social icons to the right side
Resources
- Download the Elegant Icon Font set and open the style.css file to find the icon you want to use to replace the phone or email icon.
- Copy the code below and put it in the appropriate places to customize the fixed navigation in the manner shown in the video.
Add the following jQuery to your Divi/Extra Theme Options Integration Tab in the field titled “Add code to the < head > of your blog”
/* Keep/Move social media icons on the right */ jQuery(function($){ $('#et-info .et-social-icons').prependTo('#et-secondary-menu'); $('#et-secondary-menu .et_duplicate_social_icons').remove(); });
Add the following to your child theme’s css file or to the Divi/Extra Theme Options a “Custom CSS” field.
/* Change the secondary header email icon */ #et-info-email:before { content: '\e081' !important; } /* Hide social icons while still on left */ @media only screen and (min-width: 981px) { #et-info #et-social-icons { display: none; } }