Ever wanted to use a Full-Width Menu in a Full-Width Section and found it weird that you couldn’t add a logo? From roaming the Elegant Themes support forum, I know that this has been a feature that’s been on many people’s wish lists. I don’t know when Elegant Themes will add this feature to the Divi Builder, so, for now, we will have to find a workaround.

After looking at the few resources I found, I decided to come up with my own solution. No plugin needed, no need to mess with the functions.php or even adding script to your websites header. A little HTML and CSS will do the trick.

Watch the tutorial and let me know in the comments how this tutorial helped you. Below you will find the little bit of CSS that I used for this tutorial.

Click on the button below to load the content of YouTube.
Load content

PHA+PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL0lFaGFaUktuVy1RP3JlbD0wJmFtcDtjb250cm9scz0wJmFtcDtzaG93aW5mbz0wIiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

Here’s the bit of code for your convenience to add a logo to your full-width menu in Divi.

.logo_full_width_menu {
float: left!important;
padding: 0px;
}
.menu-padding{
padding-top: 20px;
}

Note that you can give your class any ID you want. But these are safe, as they don’t mess with any other attributes.

Cookie Preference

Please choose an option. You can find more information about the consequences of your choice via Help.

Select an option to continue

Your selection was saved!

Help

Help

To continue, you must make a cookie selection. Below is an explanation of the different options and their meaning.

  • Accept all cookies:
    Every cookie like tracking and analytic cookies.
  • Accept only first party cookies:
    Only cookies from this website.

You can change your cookie setting here anytime: Disclaimer.

Back