Header expands and contracts when scrolling

@acetouchpoint that seems to be a feature of the theme you are using on the site. Can you share the name of the theme so that we can take a deeper look?

Hi,
Yes, it is our own theme, WindoVisionUSA. I can do most other things with it, but I can’t seem to figure out how to make that stop.

For this effect to stop you can add some custom CSS to the theme that fixes the padding on the elements where it is changing.

Thank you so much for answering me.

This is what I have in the CSS for that. I don’t see anything that should do that…

`#header-space{height:90px}

#header-outer{width:100%; top:0px; left:0px; position:fixed; padding:28px 0px 0px 0px; background-color:#fff; z-index:9999}

#header-outer[data-box-shadow=”small”]{box-shadow:0 0 3px 0 rgba(0,0,0,0.22); -moz-box-shadow:0 0 3px 0 rgba(0,0,0,0.22); -webkit-box-shadow:0 0 3px 0 rgba(0,0,0,0.22)}

#header-outer[data-box-shadow=”large”]{box-shadow:0 3px 45px rgba(0,0,0,0.15); -moz-box-shadow:0 3px 45px rgba(0,0,0,0.15); -webkit-box-shadow:0 3px 45px rgba(0,0,0,0.15)}

body[data-slide-out-widget-area-style=”slide-out-from-right-hover”] #header-outer{z-index:9995}

#header-outer[data-permanent-transparent=”false”]{overflow:visible!important}

body[data-transparent-nav=”1″][data-header-color=”light”] #header-outer{background-color:rgba(255,255,255,0.965)}

body[data-header-color=”dark”] #header-outer, body[data-header-color=”dark”] #search-outer{background-color:#1F1F1F; box-shadow:none!important; -moz-box-shadow:none!important; -webkit-box-shadow:none!important; -o-box-shadow:none!important}`

• This reply was modified 2 years, 4 months ago by acetouchpoint. Reason: To add a few tags
• This reply was modified 2 years, 4 months ago by acetouchpoint.

Adding the following CSS should fix the header movement.

#header-outer { padding-top: 28px !important; }
#header-outer #logo img { height: 75px !important; }
#header-outer nav ul li:not(#social-in-menu) a {
  padding-top: 27.5px !important;
  padding-bottom: 55.5px !important;
}
#header-outer nav ul li#social-in-menu a {
  margin-top: 26.6px !important;
  margin-bottom: 54.6px !important;
}

Note that this is purely a hack that fixes the sizes to their larger values. Without having a copy of the theme it is not possible to provide an idiomatic elegant solution.

• This reply was modified 2 years, 4 months ago by dhruvkb.

Thank you so much! It works.