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"
[code lang="js"]
/* 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();
});
[/code]
Add the following to your child theme's css file or to the Divi/Extra Theme Options a "Custom CSS" field.
[css]
/* 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;
}
}
[/css]