Front page header area acting strange

Hello,

I have a problem where the front page header acts up. It doesn’t do it all the time, but in most of the times the logo is transparent and the title that’s supposed to start from under the logo & pages is now under the logo. The logo & pages black should be solid. Here’s a screenshot http://www.huiman.fi/wp-content/uploads/2017/09/etusivu_ongelma.png

I have this customs CSS in my Custom CSS -part regarding this section.

"@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
.text-slider-section{
top: 20%;;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 50%;
}
}

@media only screen and (max-width: 420px) {
.text-slider .maintitle {
font-size: 80%;
}
}

.slide-inner {
top: 90%;
}

.header-slider {
width: 100% !important;
height: 800px !important;
}

.text-slider .maintitle:after,
.panel-grid-cell .widget-title:after{
display: none;
}

.site-header {
background-color: rgba(0,0,0,1) !important;
} "

Also for site logo I have this

".site-logo {
max-height: 200px;
margin-bottom: 30px;
margin-top: 30px;
}

@media only screen and (max-width: 1024px) {
.site-logo {
max-height: 120px;
}
}"

How can I fix this?

Hello there,

I visited your site and the header appear to have been displaying fine.

Cloudup

Have you managed to resolve it yourself?

Regards,
Kharis

This is part of the problem - sometimes it appeares OK especially if you have visited the site before. Sometimes it’s like in the picture shown in my first message - so it appears randomly.

The browser has nothing to do with it (I’ve tried Chrome, Mozilla and Edge).

Anyone have any ideas for this problem?

Hello there,

Please try adding this CSS code to set a fixed height of the .header-clone element when the site header is positioned in absolute.


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

  .header-clone {
    min-height: 348px;
  }

}

Let me know how it goes.

Regards,
Kharis

Hey there,

I have the exact same problem for my website https://windisch-lang.de. Sometimes the bug appears, but most of the time it is fine. To recall the problem, the content goes under the menu. I tried your CSS, but the problem is still here.

I had kind of a similar problem last year, which you helped me solved here: Content displays under static menu. It worked on this website: http://apic-sa.fr.

Though when I try the CSS on the other website https://windisch-lang.de:

    .site-header,
    .site-header.fixed {
      position: static !important;
    }

my menu is pushed down:

I don’t know what to do not to have this bug with content going under menu.

Thanks in advance

Hello there,

Sorry I couldn’t really notice the issue as everything looked good to me. However try adding this extra CSS code and see if it helps.

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

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

Regards,
Kharis