Fixed Header on Mobile Device Not Working Correctly

[happycowstudios]

site is: celebrationchurchnc.com

everything works fine on desktop. however, on mobile the header is fixed but it cuts off the slider images. how do i adjust for the slider images?

below is some custom css from the past couple years that you guys have asked me to add for several different reasons. is any of this causing this problem? or is there something i can add to fix it?

thanks!
shaun

.x-navbar {
position: fixed;
width: 100%;
background: #256faf;
border-bottom: 0;
box-shadow:none;
height: 90px;
}

.x-slider-container.below {
margin-top: 90px;
}

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
display: show;
}
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/x standard menu - submenu position/
.x-navbar .desktop .x-nav > li ul {
top: 65px;
}

/x standard menu - submenu text color/
.x-navbar .desktop .sub-menu a {
color: black;
}

#submenu {
z-index: 999 !important;
}

[happycowstudios]

or could it be a setting in the slider element?

[paul.r]

Hi,

To fix it, you can add the code below in Theme Options > CSS

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 90px;
}
}

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Hope that helps

[happycowstudios]

perfect! that worked. thanks!

[paul.r]

You’re welcome!