How to use a different logo on mobile in Divi header

Hi, my dear Divi maniac,

I never said but I love all the requests from my clients because I can improve my skills.

A client asked me to display a different logo on mobile devices. Divi does it easily with these 2  steps.

#1 STEP

Upload the mobile logo image in your media library and get its URL.

#2 STEP

Go to Divi > Theme Options > Custom CSS and add this css code into the box:

@media only screen and (max-width: 981px) {
#logo {
content: url("http://yourwebsite.com/mobile_logo.png");
}
}

Replace the URL SAMPLE with the URL of your mobile logo and… That’s it.

But, what happens if the client wants that his logo is aligned with the hamburger menu icon?

To solve this problem you have simply to add the CSS code I write here:

@media all and (max-width: 980px) {
/* align header container text to left */
.et_header_style_centered #main-header .container,
.et_header_style_split #main-header .container {
text-align: left;
}

.et_header_style_centered header#main-header .logo_container,
.et_header_style_split header#main-header .logo_container {
position:relative;
z-index: 2;
max-width: 50%;
}

.et_header_style_split header#main-header .logo_container {
float: left;
}

.et_header_style_split #logo {
max-width: 100%;
}

.et_header_style_centered #main-header div#et-top-navigation,
.et_header_style_split #main-header div#et-top-navigation {
position: absolute;
}

.et_header_style_centered #main-header .mobile_nav,
.et_header_style_split #main-header .mobile_nav {
background-color: rgba(0, 0, 0, 0);
}

.et_header_style_centered #main-header .mobile_nav,
.et_header_style_split #main-header .mobile_nav {
padding: 5px 0px;
}

.et_header_style_centered #et_mobile_nav_menu,
.et_header_style_split #et_mobile_nav_menu {
margin-top: 0px;
}

.et_header_style_centered #main-header .mobile_nav .select_page,
.et_header_style_split #main-header .mobile_nav .select_page {
display: none;
}

.et_header_style_centered #main-header .mobile_menu_bar,
.et_header_style_split #main-header .mobile_menu_bar {
position: relative;
right: 0px;
text-align: right;
}

.et_header_style_centered #main-header .et_mobile_menu,
.et_header_style_split #main-header .et_mobile_menu {
top: 63px;
}
}

Really easy!
Enjoy your new navigation!