Adding a Logo to a Full-Width Menu
One of my favorite things about using Divi is the flexibility of all of the features. And even when some of those features are “hidden” from the general public, most of the workarounds are pretty simple. The feature I’ll be detailing here is a workaround for displaying your site logo in the Divi “Full-Width Menu Module.”
I would hope that Divi would add this feature as a standard option for web designers in later updates. But, for now, this is the only option that works seamlessly while still allowing the rest of your navigation to function as you would hope.
Start out by creating a new page and enabling the Divi builder. Once you do that make sure you have your page template set to a blank page instead of as part of your default template. You can find this under “Page Attributes,” if you aren’t familiar with the function.
Once you’ve set your template to a blank page, then you can go ahead and enable the full-width menu in Divi.
Set the correct menu you wish to add your logo to. Once that is saved, head over to the “New Post” tab within the main WordPress dashboard sidebar. Once you’ve created a post, add your logo in the “Text” module, and then switch from the visual editor to the text editor.
Switching to the text editor will bring up a code that has been generated by your logo. Copy the code shown in your text editor. (The code will be added to your menu in the next step).
Once that code is copied, you can exit out of the post (saving is not required since the post was created just to display the code). Now you’ll navigate to the left-hand side of your screen to the WordPress global navigation. Hover over “Appearance” and select “Menus.” Here you will need to find the menu you wish to add the logo too.
Below, you can see I’ve created a sample menu for this demonstration. All of my navigation links are set to custom links only for the purposes of creating sample pages. You will most likely have actual page links in your menu.
This time, you will need to add a custom link. In the fields of your new custom link, you can either link back to your landing page or you can enter # to create a static image that will not direct to a specific page. In the “Link Text” box you will paste the image code that was created in the text field, earlier. Don’t worry, the actual code will now show up in your navigation, it will show your logo). You can now drag the logo to the top of your menu and it will appear as the first item. The sizing can also be adjusted for a proper fit.
Now that you have the logo placement at the top of your navigation, save your menu and preview your design. As I stated previously, the sizing can be adjusted for the fit you are looking for. This can be done by editing the code’s width and height values. You can see above that my dimensions above are listed as width=75 and height=40.
Head back into the Divi builder once you find the exact dimensions that work for you. Here, you can also adjust the spacing and padding within the module to move the logo closer or further from the other links in your menu.
You can see my finished example, below:
