Header Covering Content

Dear all,

Sometimes when people access my page, the Header appears to cover the main content, then when the page is refreshed this gets fixed.

I have added the following CSS as suggested in previous topics but the problem persists:

.overlay {
display: none !important;
}

.site-header.float-header {
padding: 20px 0;
}

My website is www.britishconsultinggroup.com

The troubling aspect is that by refreshing the page, the bug gets fixed so I am not sure this will be a CSS issue.

Kind Regards,

Daniel

Hi Daniel,

Please try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.header-clone {
  height: 253px;  
}  

@media only screen and (min-width:1025px) {
  
  .header-clone {
    height: 274px;  
  }   
  
}

Regards,
Kharis

Dear Kharis,

I’ve made the sugested adjustment but the problem persists. I’ve uploaded an image of what is happening, please find it at https://postimg.org/image/49qgo5un9/b3a04da0/

I am using the following CSS codes on my website:

.footer-widgets {
padding-top: 50px;
padding-bottom: 0px;
text-align: center;
}

.hentry .title-post {
font-size: 35px;
color: #002264;
text-align: center;
}

.site-header{
padding-top: 25px;

}
.site-logo {
max-height: 150px;

}

.home h1 { display:none }

#mainnav{
background-color: #002264;
}

#mainnav ul.menu > li > a{
color: #fff;
padding-top: 10px;
padding-bottom: 3px;

}

#mainnav .sub-menu li a {
border-top-color: #fff;

}

#mainnav-mobi {
background-color: #002264;
}

#mainnav-mobi ul li {
border-color: #fff;
}

.page-wrap { padding: 83px 0px 100px; clear: both; margin-top: -112px; margin-bottom: -112px;
}

.content-area.col-md-9 { width: 100% !important;
}

#mainnav ul ul a,
#mainnav ul li ul{
width: 300px;
}

.header-wrap > .container {
width: 100%;
padding: 0;
}

#mainnav-mobi .sub-menu a {
background: #002264
}

.overlay {
display: none !important;
}

.site-header.float-header {
padding: 20px 0;
}

.header-clone {
height: 253px;
}

@media only screen and (min-width:1025px) {

.header-clone {
height: 274px;
}

}

Kind Regards,

Daniel

Hello there,

Please try this code:


.header-clone {
  height: 253px !important;
}

@media only screen and (min-width:1025px) {

  .header-clone {
    height: 274px !important;
  }

}

and put it at the most top line.

Once you’re done, clear your web browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

Dear Kharis,

Thank you for your support.
I’ve been using my website through the weekend and it seems like the problem has been solved.
I appreciate your help.

Kind Regards,

Daniel