{"id":813337,"date":"2022-06-04T16:00:49","date_gmt":"2022-06-04T16:00:49","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/how-to-add-a-responsive-logo-to-your-fullwidth-menu-module-in-divi\/"},"modified":"2022-06-10T21:57:38","modified_gmt":"2022-06-10T21:57:38","slug":"how-to-add-a-responsive-logo-to-your-fullwidth-menu-module-in-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-add-a-responsive-logo-to-your-fullwidth-menu-module-in-divi\/","title":{"rendered":"How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi"},"content":{"rendered":"
\n
\n

Did you know that over 50 percent of internet traffic comes from mobile devices? That means that the mobile version of your website is extremely important, and may even be the primary way someone will visit your page. Making sure that your website is responsive and mobile-friendly is an essential step in designing a website. In this tutorial, we will show you how to add a responsive logo to your fullwidth menu module using Divi\u2019s built-in responsive options. This will allow you to add a larger or more complex logo that will appear on bigger screens and a smaller or simpler logo that will appear on smaller screens.<\/p>\n

Let\u2019s dive in!<\/p>\n

Sneak Peek<\/h2>\n

Here is a preview of what we will design. The desktop version of the website will have an expended logo with additional text, and the mobile version of the logo will only have the basic logo mark.<\/p>\n

\"Divi<\/p>\n

\"Responsive<\/p>\n

Why You Need a Responsive Logo<\/h2>\n

Before we begin the tutorial, let\u2019s go over why you might need a responsive logo on your website.<\/p>\n

First, what is a responsive logo? A responsive logo is a variation of your logo that may be smaller, simpler, abbreviated, or rearranged to be more visible and legible at smaller sizes. If your logo has too many detailed elements, they may not show up well at a smaller size. Small font sizes and extra typography in a responsive logo can also be hard to read on a small screen. By implementing a responsive logo on your website tailored to the user\u2019s screen size, you can make sure that your brand identity is clearly represented, no matter what. For some great examples of responsive logos, take a look at this website<\/a>!<\/p>\n

What You Need to Get Started<\/h2>\n

First, install and activate the Divi Theme<\/a> and make sure you have the latest version of Divi on your website. Next, make sure you have at least two versions of your logo \u2013 one for the desktop view of your site, and one for the mobile view. Finally, download the Header and Footer Template for Divi\u2019s High School Layout Pack<\/a>.<\/p>\n

Now, you are ready to start!<\/p>\n

How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi<\/h2>\n

Import the Header and Footer Layout<\/h3>\n

Navigate to the Theme Builder from the Divi menu in the sidebar. Import the High School Header and Footer layout by selecting the portability icon. Select the Import tab and choose the layout file. Then select Import Divi Theme Builder Templates.<\/p>\n

\"Divi<\/p>\n

We will edit the header and add our responsive logo in the theme builder. Click on the pencil icon to edit the header.<\/p>\n

\"\"<\/p>\n

Create the Fullwidth Menu Module<\/h3>\n

Add a Fullwidth Section<\/h4>\n

Since the original menu is built with a standard menu module, we will need to modify the layout to add a fullwidth menu module. First, add a fullwidth section to the global header below the existing menu.<\/p>\n

\"Divi<\/p>\n

In the fullwidth section settings, navigate to Advanced, then Scroll Effects.<\/p>\n