How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi

by | Jun 4, 2022 | Etcetera | 0 comments

Do you know that over 50 % of web site visitors comes from cellular gadgets? That implies that the cellular model of your site is terribly necessary, and will even be the main manner somebody will discuss with your web page. Ensuring that your site is responsive and mobile-friendly is an crucial step in designing a site. On this instructional, we will be able to display you the best way to upload a responsive emblem in your fullwidth menu module the use of Divi’s integrated responsive choices. This may occasionally assist you to upload a bigger or extra advanced emblem that can seem on larger monitors and a smaller or more practical emblem that can seem on smaller monitors.

Let’s dive in!

Sneak Peek

Here’s a preview of what we will be able to design. The desktop model of the site may have an expended emblem with further textual content, and the cellular model of the emblem will best have the fundamental emblem mark.

Divi Responsive Logo Full Width Menu Final Design

Responsive Logo Full Width Menu Mobile

Why You Desire a Responsive Brand

Prior to we start the academic, let’s pass over why chances are you’ll want a responsive emblem in your site.

First, what’s a responsive emblem? A responsive emblem is a variation of your emblem that can be smaller, more practical, abbreviated, or rearranged to be extra visual and legible at smaller sizes. In case your emblem has too many detailed components, they would possibly not display up smartly at a smaller dimension. Small font sizes and additional typography in a responsive emblem will also be onerous to learn on a small display screen. Via enforcing a responsive emblem in your site adapted to the consumer’s display screen dimension, you’ll be able to make certain that your logo id is obviously represented, it doesn’t matter what. For some nice examples of responsive emblems, check out this website!

See also  WordPress Undertaking Safety: Safe Huge-Scale Websites

What You Want to Get Began

First, install and activate the Divi Theme and be sure you have the newest model of Divi in your site. Subsequent, be sure you have no less than two variations of your emblem – one for the desktop view of your web page, and one for the cellular view. In any case, obtain the Header and Footer Template for Divi’s High School Layout Pack.

Now, you are prepared to begin!

Tips on how to Upload a Responsive Brand to Your Fullwidth Menu Module in Divi

Import the Header and Footer Structure

Navigate to the Theme Builder from the Divi menu within the sidebar. Import the Prime College Header and Footer structure by way of settling on the portability icon. Make a selection the Import tab and make a selection the structure report. Then make a selection Import Divi Theme Builder Templates.

Divi Responsive Logo Full Width Menu Import Layout

We will be able to edit the header and upload our responsive emblem within the theme builder. Click on at the pencil icon to edit the header.

Create the Fullwidth Menu Module

Upload a Fullwidth Segment

For the reason that authentic menu is constructed with a regular menu module, we will be able to want to adjust the structure so as to add a fullwidth menu module. First, upload a fullwidth phase to the worldwide header beneath the prevailing menu.

Divi Responsive Logo Full Width Menu Add Full Width Section

Within the fullwidth phase settings, navigate to Complex, then Scroll Results.

  • Sticky Place: Stick with Best

Subsequent, upload the background colour.

  • Background Colour: #f5f0eb

Divi Responsive Logo Full Width Menu Section Background

Upload a unique colour for the sticky background.

  • Sticky Background Colour: #ffffff

Divi Responsive Logo Full Width Menu Sticky Background

Upload a Fullwidth Menu Module

Now let’s upload the fullwidth menu module.

Divi Responsive Logo Full Width Menu Add Menu Module

Open the module settings and take away the background.

Divi Responsive Logo Full Width Menu Delete Background

To simply reflect the glance of the unique menu, we will use the reproduction types serve as to duplicate over one of the crucial custom designed settings. Open the settings for the unique menu, then appropriate click on on Menu Textual content Kinds and make a selection Replica Menu Textual content Kinds.

See also  How to Use the WordPress TED Embed Block

As soon as copied, click on the 3 dots for the fullwidth menu module, then make a selection Paste Menu Textual content Kinds.

Now we will be able to repeat the similar steps with the dropdown menu settings. Open the settings for the unique menu, then right-click on Dropdown Menu Kinds and make a selection Replica Dropdown Menu Kinds. Click on the 3 dots for the fullwidth menu module, then make a selection Paste Dropdown Menu Kinds.

Repeat all over again for the icon types. Open the settings for the unique menu, then appropriate click on on Icon Kinds and make a selection Replica Icon Kinds. Click on the 3 dots for the fullwidth menu module, then make a selection Paste Icon Kinds.

Divi Responsive Logo Full Width Menu Copy Paste Icon Styles

Set the textual content alignment to left.

  • Textual content Alignment: Left

Divi Responsive Logo Full Width Menu Text Alignment

Set the emblem max top below Design, then Spacing.

  • Brand Max Peak: 50px

Divi Responsive Logo Full Width Menu Logo Max Height

Upload the next CSS to the Menu Hyperlink phase below Customized CSS.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Divi Responsive Logo Full Width Menu Custom CSS

In any case, set the highest and backside padding.

  • Padding-Best: 10px
  • Padding-Backside:10px

Divi Responsive Logo Full Width Menu Add Padding

Now delete the unique menu phase.

Divi Responsive Logo Full Width Menu Delete Section

Upload a Responsive Brand

Now we will be able to upload the responsive emblem. Fortunately Divi makes this straightforward with the integrated responsive choices.

Underneath Common, open the emblem settings and add the desktop model of your emblem.

Divi Responsive Logo Full Width Menu Add Logo

Make a selection the telephone icon to make use of the responsive choices, then change the cellular emblem along with your responsive emblem.

Divi Responsive Logo Full Width Menu Upload Responsive Logo

Create a New Web page with a Premade Structure

To peer the fullwidth menu with the responsive emblem in motion, let’s create a brand new web page with a premade structure from the Divi library. For this design, we will be able to use the Prime College House Web page from the High School Layout Pack to check the header and footer.

See also  How to Edit a Divi Cloud Item

Upload a brand new web page in your site and provides it a name, then make a selection the way to Use Divi Builder. Since we imported the header and footer structure as the worldwide header and footer, use the default structure for this web page.

Divi Responsive Logo Full Width Menu Create Page

We will be able to use a premade structure from the Divi library for this situation, so make a selection Browse Layouts.

Divi Responsive Logo Full Width Menu Browse Layouts

Seek for and make a selection the Prime College House Web page structure.

Make a selection Use This Structure so as to add the structure in your web page.

Divi Responsive Logo Full Width Menu Use Layout

Ultimate Outcome

Now let’s check out our ultimate design.

Divi Responsive Logo Full Width Menu Final Design

Responsive Logo Full Width Menu Mobile

Ultimate Ideas

Having a mobile-friendly and responsive site is extra necessary than ever. And due to Divi’s integrated responsive choices, development one is more uncomplicated than ever! With a responsive emblem, your logo id will at all times be transparent, it doesn’t matter what dimension the display screen. If you have an interest in studying extra about Divi’s responsive choices, take a look at this tutorial about responsive testimonial content. How have you ever carried out responsive designs into your site? We’d love to listen to your ideas within the feedback!

The publish How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment