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
<\/p>\n
<\/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 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 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 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 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 In the fullwidth section settings, navigate to Advanced, then Scroll Effects.<\/p>\n Next, add the background color.<\/p>\n Add a different color for the sticky background.<\/p>\n Now let\u2019s add the fullwidth menu module.<\/p>\n Open the module settings and remove the background.<\/p>\n To easily replicate the look of the original menu, we can use the copy styles function to copy over some of the customized settings. Open the settings for the original menu, then right click on Menu Text Styles and select Copy Menu Text Styles.<\/p>\n Once copied, click the three dots for the fullwidth menu module, then select Paste Menu Text Styles.<\/p>\n Now we will repeat the same steps with the dropdown menu settings. Open the settings for the original menu, then right-click on Dropdown Menu Styles and select Copy Dropdown Menu Styles. Click the three dots for the fullwidth menu module, then select Paste Dropdown Menu Styles.<\/p>\n Repeat once more for the icon styles. Open the settings for the original menu, then right click on Icon Styles and select Copy Icon Styles. Click the three dots for the fullwidth menu module, then select Paste Icon Styles.<\/p>\n Set the text alignment to left.<\/p>\n Set the logo max height under Design, then Spacing.<\/p>\n Add the following CSS to the Menu Link section under Custom CSS.<\/p>\n Finally, set the top and bottom padding.<\/p>\n Now delete the original menu section.<\/p>\n Now we will add the responsive logo. Thankfully Divi makes this easy with the built-in responsive options.<\/p>\n Under General, open the logo settings and upload the desktop version of your logo.<\/p>\n Select the phone icon to use the responsive options, then replace the mobile logo with your responsive logo.<\/p>\n To see the fullwidth menu with the responsive logo in action, let\u2019s create a new page with a premade layout from the Divi library. For this design, we will use the High School Home Page from the High School Layout Pack<\/a> to match the header and footer.<\/p>\n Add a new page to your website and give it a title, then select the option to Use Divi Builder. Since we imported the header and footer layout as the global header and footer, use the default layout for this page.<\/p>\n We will use a premade layout from the Divi library for this example, so select Browse Layouts.<\/p>\n Search for and select the High School Home Page layout.<\/p>\n Select Use This Layout to add the layout to your page.<\/p>\n Now let\u2019s take a look at our final design.<\/p>\n Having a mobile-friendly and responsive website is more important than ever. And thanks to Divi\u2019s built-in responsive options, building one is easier than ever! With a responsive logo, your brand identity will always be clear, no matter what size the screen. If you are interested in learning more about Divi\u2019s responsive options, check out this tutorial about responsive testimonial content<\/a>. How have you implemented responsive designs into your website? We\u2019d love to hear your thoughts in the comments!<\/p>\nWhat You Need to Get Started<\/h2>\n
How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi<\/h2>\n
Import the Header and Footer Layout<\/h3>\n
<\/p>\n
<\/p>\n
Create the Fullwidth Menu Module<\/h3>\n
Add a Fullwidth Section<\/h4>\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
Add a Fullwidth Menu Module<\/h4>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
padding-top: 0px;\r\npadding-bottom: 5px;\r\npadding-left: 0.3em;\r\npadding-right: 1.3em;<\/pre>\n
<\/p>\n
\n
<\/p>\n
<\/p>\n
Add a Responsive Logo<\/h4>\n
<\/p>\n
<\/p>\n
Create a New Page with a Premade Layout<\/h3>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Final Result<\/h2>\n
<\/p>\n
<\/p>\n
Final Thoughts<\/h2>\n