When using the Vertical Navigation of the DIVI Theme we might face some issues with the applicability of our Logo. In the vertical navigation sidebar, a logo of rectangular proportions looks best, while in resolutions where the mobile menu jumps in, a long horizontal logo is better. The DIVI Theme doesn’t allow in its actual version 2.5.9 to set a different logo for the vertical navigation and the mobile menu.
But it can still be done, even update-safe by using a child-theme. The mobile logo URL will be hardcoded, so the client can not change it from within the DIVI options, but otherwise it is a superb customization. Thanks to Vlad from the Elegant Themes Support for this great inspiration.
Open /header.php file and search for this code in line 123 (v2.5.9):
|
1 |
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> |
Just after this line, add:
|
1 |
<img src="URL TO MOBILE LOGO IMAGE HERE" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo-mobile" /> |
In your child-theme styles.css or directly in ePanel / Custom CSS add the following CSS:
|
1 2 3 4 5 6 |
.et_header_style_left #logo-mobile, .et_header_style_split #logo-mobile {max-width: 50%; max-height: 70%; vertical-align: middle;} #logo-mobile { display: none; } @media only screen and (max-width: 981px) { #logo { display: none; } #logo-mobile { display: inline-block; } } |
And that’s it. Now you have a fully responsive logo in your mobile menu, different than the logo from your vertical navigation menu. You can see the result right here on sundari-webdesign.com, if you watch it on a desktop. Shrink your browser to see the change.
