Black header appearing when scrolling down & on mobile version

Hi there,

I am not sure how to describe this but when you scroll down on my Sydney theme website a black bar appears in the header then disappears. This black bar is not too much of a problem on the desktop site but on the mobile site it appears without scrolling and blocks out the company logo (which is also black).

Looking at the code, and I am no expert, it seems as though it’s the site float-header that’s the problem but I could be wrong.

Can you help?

Many thanks

Alex
www.bondpictures.co.uk

Hi,

Use this to change the color of your header area and the menu button when in mobile screen:

@media only screen and (max-width: 1024px){
  .site-header {
    background-color: #FFF;
  }
}

.btn-menu {
    color: #000;
}

Put the code in: Customize > additional CSS.

Regards,
Awan

Thank you.

When I enter the code I get a warning as I’ve too many, or too few curly brackets.

The code below is already in the custom area can you tell me what I should add to make it all correct? ie where do I add the extra code? - I’m not a web designer so I’m afraid I’m making mistakes.

Many thanks

Alex

.single-projects .sydney-hero-area .header-slider {
display: none;
}

.single-projects #mainnav ul li a {
color: #000;
}

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

.single-projects .sydney-hero-area {
height: 200px !important;
}

}

I have added the code so the custom code for the page now looks like the below. The error is still happening - can you see it? When you scroll the page down the black still apears briefly.

@media only screen and (max-width: 1024px){
.site-header {
background-color: #FFF;
}
}

.btn-menu {
color: #000;
}
.single-projects .sydney-hero-area .header-slider {
display: none;
}

.single-projects #mainnav ul li a {
color: #000;
}

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

.single-projects .sydney-hero-area {
height: 200px !important;
}

}

.single-projects .sydney-hero-area .header-slider {
display: none;
}

.single-projects #mainnav ul li a {
color: #000;
}

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

.single-projects .sydney-hero-area {
height: 200px !important;
}

}

Checked. you have duplicate code in above. Please replace it with this:

.btn-menu {
  color: #000;
}

.single-projects .sydney-hero-area .header-slider {
  display: none;
}

.single-projects #mainnav ul li a {
  color: #000;
}

@media only screen and (min-width:1025px) {
  .single-projects .sydney-hero-area {
    height: 200px !important;
  }
}

@media only screen and (max-width: 1024px){
  .site-header {
    background-color: #FFF;
  }
}

Then add this to remove the black color on the top of the page when its scrolled:

.site-header.float-header {
    background-color: transparent;
}

Great! Thank you so much :slight_smile: