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