WordPress

How to disable header shrink on scroll for DIVI theme

0
876
2019 / 07 / 16

DIVI is one of the best WordPress multi-purpose theme from which you can build any type of website design. It comes with a lot of cool features which makes the site easy to use even for savvy peoples.

One of the amaizing feature is to create a fixed (static) header. You can enable fixed menu on scroll by enabling Fixed Navigation Bar option which is located as:

DIVI > Theme Options > General

 

enable-fixed-header-menu-on-divi

 

Now, when you open your site you will notice that the menu bar starts to shrink when you scroll it.

Some people like it, but if you using a JPG or PNG logo, the shrinking effect will pixellate your logo even when you are using high dimension logo. Only SVG logo works best in this case.

Unfortunately DIVI don’t have option to disable the shrinking effect of menu bar.

To disable the shrinking effect of menu bar on scroll, you need to add following CSS either in style.css of your child theme or in the theme customizer tab.

 

.et_header_style_left .et-fixed-header #et-top-navigation,
.et_header_style_split .et-fixed-header #et-top-navigation{
    padding-top: 19px !important;
}

.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a,
.et_header_style_split .et-fixed-header #et-top-navigation nav > ul > li > a {
    padding-bottom: 33px;
}

 

Please note that the padding-top and padding-bottom values can vary from design to design, so you can add your desired value to adjust your menu height. Thats all!

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks