The DIVI Primary menu and logo shrinks in size when you scroll down the page. In DIVI when you scroll down, the fixed header settings come into effect. In this quick tip we will see how to prevent the shrinking of the DIVI primary menu and logo and keep it the same size on scroll. 

You can make the Primary Menu and Fixed Menu (on scroll) height to exactly same so that your logo and menu items do not shrink. Lets see how to do that. 

Here’s how the Primary menu looks with the default settings. Notice how when you scroll the the primary menu and logo shrink.

Primary Menu Before Scrolling Down

DIVI Header/Primary Menu before Scroll

Primary Menu After Scrolling Down

DIVI Header/Primary Menu after Scroll

Steps for keeping DIVI Menu same size on scroll

Step 1) Find out what your primary menu height and the text size is is by navigating to 

DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> MENU HEIGHT

DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> TEXT SIZE

In my case this a a value of 67 and 14 as shown below . 

Primary Menu Height in DIVI

Step 2 ) Make the Fixed Menu height and text size same as the number you have in the primary menu (in my case 67 and 14)

Navigate to 

DIVI –> Theme Customizer –> Header & Navigation –> Fixed Navigation Settings –> FIXED MENU HEIGHT

DIVI –> Theme Customizer –> Header & Navigation –> Fixed Navigation Settings –> TEXT SIZE

Make the fixed menu height and the text size exactly same as the primary menu and now your logo and menu items won’t shrink on scrolling down.

Fixed Menu Height in DIVI

Now, when you scroll both the menu will not shrink any more and both of them will have the same height and text size.

I hope you enjoyed this quick tip. For more DIVI TIPS and TRICKS make sure you visit my DIVI BLOG.
If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts –

• Hide DIVI Top Header/Secondary Menu on Scroll

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Today we will see how to add a background image to the DIVI primary menu also know as the main header. You can change the colors of the DIVI Primary Menu using the Theme Customizer Options, but cannot add an image using the Theme Customizer.

Settings in the DIVI THEME CUSTOMIZER

Before I change the background to an image, my background for the primary menu was set to a black color.  This was set in the DIVI Customizer by going to 
DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> BACKGROUND COLOR

I have chosen a color of WHITE for the text color. This can be selected by navigating to 
DIVI –> Theme Customizer –-> Header & Navigation –-> Primary Menu Bar –> TEXT COLOR

This is what my the main header looks like with the black background and white text setting for the primary menu. 

Background Color Primary Menu – DIVI

Things To Do Before You Add the CSS

Choose the color for your text, so that it contrasts well with the background image that you are going to be using. Use a dark color text if the background image is light in color. I have chosen white as my background image is dark in this example. Make sure you adjust the colors for the social icons to match your background image.

The social icons color cannot be changed from the DIVI Theme Customizer. You can check out my post : Change the color for email, phone and social media icons in DIVI to change the color of the social icons with a few lines of CSS.

Next, make sure you upload the image you want for your background in your media library. I have used an attribution free picture from the site pixabay. I have also sized the image to a 1920px by 108px using Photoshop. 

Once the image is uploaded to the media library, find the URL of the image. You will need that in the CSS that we write. 

My background image looks like this

Primary Menu Background Image

The URL was https://wpportfolio.com/wp-content/uploads/2019/10/primarymenu-background.jpg

CSS to add Background Image on DIVI Primary Menu 

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Add a Background Image to the DIVI Primary Menu */
#main-header{
background: url(“https://wpportfolio.com/wp-content/uploads/2019/10/primarymenu-background.jpg”) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

Make sure you replace the background URL to the url of your image. 

Here is what the Primary menu looks like after applying the above CSS. 

Primary Menu with Background Image – DIVI

I hope you like this tip and if you do use it on your website, do leave me a comment. Also for more such tips make sure you check out my DIVI TIPS on my blog.

Picture courtesy – Pixabay.
Image used for background.: https://pixabay.com/illustrations/banner-header-logo-header-1631295/

Related Posts –

• Add Background image to your DIVI mobile menu
• Add Background Image to the DIVI footer/bottom bar

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Change the color of the primary menu and sub menu links on desktop and mobile, when you hover over them. By default you can set the color of the Primary Menu items and only the active menu item using the DIVI options.

Its a good visual indicator for the user when you change the color of the menu, specially if you have long sub menus. 

Let’s add some CSS to change the colors for desktop and mobile. To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box. 
I have used an orange color (#ffa500) in my example CSS. Change it to the color best suitable for your website.

Add CSS to Change Hover Colors for your Primary Menu

/* Change color on primary menu */
#top-menu-nav #top-menu a:hover,#mobile_menu_slide a:hover
{
    color: #ffa500!important;
    opacity:1 !important;
}

Change color of primary menu on hover – DIVI

Add CSS to Change Hover Colors for your Mobile Menu

/* Change color on Mobile Menu  */
.et_mobile_menu li a:hover, header#main-header.et-fixed-header ul li ul li a:hover
{
color: #ffa500 !important;
opacity:1 !important;
}

Change color of mobile menu on hover – DIVI

I hope this DIVI Tip was helpful and if you do use it on your site, leave me a comment. For more such useful tips on WordPress and DIVI, do check out my DIVI Blog. 

Related Posts –

• How to Remove the Drop Down Arrow from the DIVI Primary Menu
• How to Change Hamburger or Mobile Menu Color in Divi
• Change the Color for Email, Phone and Social Media Icons in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

There might be times you might want to remove the drop down arrow from divi’s primary menu bar. Let’s see how we can do this. By default when you have sub menu items in your primary menu, you will notice that there is a small arrow to the right of the parent menu. I think this is a good desirable feature for your menu as it is a good visual indicator for a user that there are sub-menu items under this main menu item.

Recently I was working on a website for a client, who wanted a clean look and wanted me to remove the drop down arrow from the primary menu.

The image below shows the arrow on the drop down menu.

Drop Down Menu Arrow in DIVI

Remove the Drop Down Menu with CSS

With a little bit of CSS I was able to remove the arrow for my client. The sub menus are still visible when you hover over the main menu. While I like the drop down arrow, I removed it because that is what my client wanted.

Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

/* Remove the down arrow from divi’s primary menu */
‪#top-menu .menu-item-has-children > a:first-child:after{content: ” ;}
#top-menu .menu-item-has-children {padding-right: 0px;}

Drop Down Arrow Removed

The CSS looks for all the top-menu items that have any children (sub-menu) and replaces the content (down arrow) with a blank space. The second line of CSS also removes any extra padding to the right of the menu which have sub-items.

The menu still functions normally, showing the sub menus on hover.

Hope this tip help you and if you have any questions feel free to leave a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• Change Color of Primary and Mobile Menu on Hover in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.