How to add additional social icons in the header or footer of Extra

Add new social icons in the header of Elegant Themes Extra theme

1- Open the header.php file and add this code:

<li class="et-extra-social-icon">
<a href="enter link here to page or profile" alt="100% Canadian" class="et-extra-icon et-extra-icon-background-hover"><img src="https://your-image-path.png" /></a> 


right after this code:

 <li class="et-extra-social-icon <?php echo $social_icon; ?>">
<a href="<?php echo esc_url( $social_icon_url ); ?>" class="et-extra-icon et-extra-icon-background-hover et-extra-icon-<?php echo $social_icon; ?>"></a>
</li>
<?php } ?>
<?php } ?>


You can then do the same for footer.php if you wish to have the same icon. 

To add a hover colour to social icon like the others, use this code in custom css box of extra:

.et-extra-icon-background-hover:hover {
background: #c0392b!important;
}


Adding word MENU on mobile menu bars

To add the word "MENU" to your mobile menu along with the hamburger icon. Add this CSS code to your custom CSS box.

.mobile_menu_bar:after {
content: "Menu" !important;
display: block !important;
font-family: initial !important;
position: absolute;
font-size: 20px;
left: 36px !important;
top: 13px !important;
}

Set a different phone number on specific page with Divi

To add a css rule that displays a different phone number on a specific page, add the following script to the wp-admin>divi>theme options>Integration>Add code to the < head > of your blog:


<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('.page-id-13232 #et-info-phone').text('1-800-282-2822');
} );
</script>


Replace the highlighted part with your own phone number and page ID number.

Make DIVI mobile menu appear on Tablet

To make your mobile menu appear on a larger screen size. Login into WordPress admin and in the custom CSS box, add the following code:

@media only screen and (max-width: 1450px) and (min-width: 961px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}
#main-header {
position: absolute !important;
}
}

Custom image in DIVI header

To add a custom image to the header on DIVI please go to divi -> theme options -> custom css and add this code :

#main-header{
background-image:url("YOUR URL GOES HERE") !important;
}

Want to share CSS?

Do you make CSS edits and want to share your work. We have easy tools to allow you to share your work on cssDorks.

Search

Tags

NYC Airports Limo offers NYC limo Service and New York Limousine Service from New York City to John F. Kennedy - JFK, LaGuardia Airport - LGA, Newark Liberty Airport - EWR and Westchester County Airport - HPN. NYC Airports Limo use Sedans & SUVs for Limo Service NYC to NJ, Pennsylvania, Connecticut, New Jersey, Long Island, Queens, Brooklyn, Bronx, Staten Island, New York City, Nassau County, Suffolk County & Upstate NY. NYC Airports Limo is has vast experience in assisting clients get to popular destinations.

CT Airlink offers the Airport Shuttle Service throughout Connecticut to JFK, LaGuardia - LGA, Newark - EWR, Boston Logan, Westchester County Airport - HPN and Hartford Bradley Airport. CT Airlink use Mini Coach, Mercedes Sprinters and Luxury Vans for CT Airport Shuttle . Allow us to assist you getting to and from all airports in New York, Connecticut and New Jersey with total ease & comfort or to provide private charter service with our Airport Transportation & Bus Service CT for the entire duration of your stay.