Background Menu (Sydney) transparent

Hi All -
thanks for the great Theme! I really like Sydney!

The menu background of my page is (viewing full size of google chrome window) without any background colour as it should be. But if I minimize the window size of the browser (or use the mobile view per iPhone), the menu background appears as black.

my website

Can anyone give some advice how to get rid of the “black background” and turn it into transparent?

Assistance greatly appreciated!
Thilo

Hello there,

In order to achieve that objective, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width: 991px){
  
  .site-header{
    background-color: transparent !important;
    height: 0 !important;
    padding: 0 !important;
  }
 
  
  .site-header .row,
  .site-header .container,
  .site-header .col-md-4{
    height: 0;
    overflow: visible;
  }
  
  .site-header .row{
    position: relative;
  }
  
  .site-header .col-md-4{
    margin-bottom: 0;
  }
  
  .site-header .col-md-4,
  .site-header .col-md-8{
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 99999;
  }    

  .site-header .col-md-8{
    position: absolute;
    top: 120px;
    left: 0;
  }  
  
}

Let me know how it goes.

Regards,
Kharis

Hi, I did this, and it works. It is transparent. But there is a lot of space between logo and menu icon. Is it possible that they are inline? Thanks

Hello there,

I would like to apologize in advance for the delayed respond. Try to add the following CSS code:

@media only screen and (max-width:991px){

  .header-wrap .col-md-4{
    text-align: left;
    margin-bottom: 0;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
  }  
  
  .site-header .col-md-8 {
      position: absolute;
      top: 78px;
      left: 0;
  }  
    
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

It is inline. Great :smiley: Thanks a lot. The menu has a top-padding, but the logo doesn’t have. How to change that? Thanks again

Actually I did it. Sorry

.header-wrap .site-logo {
    margin-top: 20px;
  }

Thanks again

Hello there,

I am glad to know that you have been able to manage it. I am marking this thread as resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi I tried this CSS to remove the menu (sticky) going white as I scroll down, but that didn’t work.
Is that because it is not what it is supposed to do?
Best regards.
Sam
PS: LOOOOOVE the theme

Hello there,

The background color of the menu bar while on scroll state is dark by default. To change it to white, you should add the following custom CSS code:


.site-header.float-header {
   background-color: #fff;
}

Thank you for choosing our theme.

Kind regards,
Kharis

Hi thanks I tried that but it didn’t really achieve what I wanted

I changed the CSS to:

.site-header.float-header {
background-color: rgba(0, 0, 0, 0),

}

http://www.zu-fi.com/

What I want is that when I scroll down that white transparent bar becomes totally invisible. and that you can only see the logo and menu items

Hello there,

Thank you for the followup. Sorry for was not getting your point. Try this code, please:


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

Regards,
Kharis

Thanks for the timely reply that worked perfectly.

One last thing :smiley:

How would I go about making the logo invisible/transparant as well as users scroll down, but still visible at the top?

How to change the color for the mobile menu bar ?
Instead of the white bars/stripes I would like to change it to blue or any other color.

@samkov

> How would I go about making the logo invisible/transparant as well as users scroll down, but still visible at the top?

Please add this custom CSS:


.site-header.float-header .col-md-4 {
  opacity: 0;  
}  

@Bernhard,

Please add this custom CSS:


.btn-menu{
  color: #ff0000;
}

Regards,
Kharis

Hello!

I did this to change the black color to white on the header - while scrolled, but nothing changed…

.site-header.float-header {
background-color: #fff;
}

What can I do?
Thank you in advance

Hello there,

Please be sure that the group of CSS code where your new code addition resides in is error free. You can validate it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

If no error be found, try the following code to set highest execution priority.


.site-header.float-header {
  background-color: #fff !important;
}

Regards,
Kharis

Hi there,

I’m having the same problem. I added the following code that you posted:
@media only screen and (max-width: 991px){

.site-header{
background-color: transparent !important;
height: 0 !important;
padding: 0 !important;
}

.site-header .row,
.site-header .container,
.site-header .col-md-4{
height: 0;
overflow: visible;
}

.site-header .row{
position: relative;
}

.site-header .col-md-4{
margin-bottom: 0;
}

.site-header .col-md-4,
.site-header .col-md-8{
height: 0;
overflow: visible;
position: relative;
z-index: 99999;
}

.site-header .col-md-8{
position: absolute;
top: 120px;
left: 0;
}

}

And it worked, however my logo/menu is now very far away from the header. I tried to use the second code you sent but it didn’t work. Any suggestions? My website is http://www.brewedclues.dreamhosters.com.

Also, I have the header set to image for pages other than the front page. Depending on the screen size, the photo sometimes stops being the background for the entire menu and is instead just a thumbnail between the logo and the menu bar. Is there a way to fix this?

Thank you! It’s a great theme!

> And it worked, however my logo/menu is now very far away from the header.

So you want the mobile menu becomes closer to the logo?

> I tried to use the second code you sent but it didn’t work.

Can you live with the first one?

> Also, I have the header set to image for pages other than the front page.

Is there any URL you can share here, so I can see?

Regards,
Kharis

Figured it out! Sorry for the late response.

Hi, I would like to make the menu area transparent. I tried the css you provided above but only shortened the height of the menu area I will appreciate.