Out of the box, the Menu module will show the logo on the left, followed by the menu items defined in Appearance> Menus.
We can switch the place of those two elements using some CSS code. Before we jump to the CSS code, we need to set up a custom CSS class on the Menu module.
Using the Menu module
Open the Menu module settings and go to Advanced Tab
Open the CSS ID & Classes option group
In the CSS Class field, type in
divi-menu-items-left-logo-right
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-menu-items-left-logo-right .et_pb_menu_inner_container {
flex-direction: row-reverse;
}
.divi-menu-items-left-logo-right.et_pb_text_align_center .et_pb_menu__wrap {
justify-content: left;
align-content: center;
}
.divi-menu-items-left-logo-right .et_pb_menu__logo {
margin-right: 0px;
margin-left: 30px;
}
@media (max-width: 980px) {
.divi-menu-items-left-logo-right .et_pb_menu__wrap {
justify-content: flex-start;
}
}Note: The CSS Code can also be placed in the Page Settings > Advanced Tab > Custom CSS.
The result on Desktop devices:
The result on Tablet and Phone devices:
Using Divi's default Menu
If the default Divi header is being used, we can use the following CSS code, which can be placed in Divi > Theme Options > General Tab > Custom CSS:
.et_header_style_left .et_menu_container {
display: grid;
grid-template-columns: auto auto;
align-items: center;
align-content: center;
}
.et_header_style_left .logo_container {
position: relative;
order: 2;
display: grid;
justify-content: flex-end;
}
.et_header_style_left #et-top-navigation {
float: none;
padding-left: 0!important;
justify-self: flex-start;
align-self: flex-start;
order: 1;
}
.et_header_style_left .et_menu_container::after {
display: none;
}
@media (max-width: 980px) {
.et_header_style_left .logo_container {
text-align: right;
}
.et_header_style_left #et-top-navigation {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
padding: 12px 0;
}
.et_header_style_left #et_top_search {
margin: 0;
float: none;
width: 17px;
height: 17px;
order: 3;
align-self: center;
justify-self: flex-end;
}
.et_header_style_left #et-top-navigation .et-cart-info {
margin: 0;
order: 2;
display: block;
align-self: center;
justify-self: flex-end;
}
.et_header_style_left #et_search_icon {
display: block;
width: 17px;
height: 17px;
position: relative;
}
.et_header_style_left #et_search_icon:before {
top: 0px;
}
.et_header_style_left #top-menu-nav {
display: none;
}
.et_header_style_left #et_mobile_nav_menu {
order: 1;
}
.et_header_style_left #et-top-navigation .mobile_menu_bar {
padding-bottom: 0;
}
}