Docs

[sendpire]

Hey there, first of thanks for that awesome theme, you guys really rock!

I’m creating my website and I want to create a header like on the ‘Uber’ page. So I use the Rev Slider to create a display filling slider looking like on Uber, how can I make the header transparent AND overlap the Rev Slider, not just while scrolling but always?

Thank you guys!

[Friech]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[sendpire]

Sry if it’s not explained too good, I’m no native speaker.

If you visit uber.com on your iphone it shows a big full screen picture (slider) and the header of the page (with logo and menu button) seems to have a transparent background and sits on the picture. If I open my site on my iphone there is the header with a white background and under it comes my revolution slider.

I hope that describes it well, I’m on my phone right now so I can’t add a screenshot.

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[sendpire]

This reply has been marked as private.

[Nabeel A]

Hi again,

Your site is in under Construction mode, would you mind sharing the login details of your site in a private message so we can take a look?

Thanks!

[sendpire]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.x-navbar {
      position: absolute;
      width: 100%;
      background-color: transparent;
      top:0;
      right:0;
      left:0;
}

.x-nav-wrap.mobile.collapse.in {
     background-color: rgba(255,255,255,0.7);
     display: block;
}

.x-navbar .mobile .x-nav li>a {
     border: 1px solid #000;
}

}

Hope that helps.

[sendpire]

works awesome! one more thing, is there a way to make the mobile menu more solid as soon as it is expanded? It is hard to see on some backgrounds.

[Lely]

Hello There,

You may adjust the following CSS:

.x-nav-wrap.mobile.collapse.in {
     background-color: rgba(255,255,255,0.7);
     display: block;
}

0.7 on this line background-color: rgba(255,255,255,0.7); is the white opacity. You may adjust it. Maximum is 1.

Hope this helps.

[sendpire]

It looks awesome on mobile! thanks!

What can I do if I want to keep the code for mobile the one you gave me and give the desktop version the same effect?

[Christopher]

Hi there,

Please add this :

@media (min-width:979px){
.x-navbar {
  background-color: rgba(0,0,0,0.5);
}
}

Hope it helps.

[sendpire]

it kinda works but not like I want it to. It creates a transparent header but the header is not on the revolution slider, it is only above the revolution slider.

I want it to be exactly like on mobile if thats possible. If you look at the mobile version, the revolution slider is placed under the transparent header. Its hard to describe but if you check out my site on a mobile device you should get what I mean.

[Christopher]

Hi there,

Please update previous code to :

@media (min-width:979px){
.x-navbar {
  background-color: rgba(0,0,0,0.5);
}
.x-slider-container.below {
  margin-top: -76px;
}
}

Hope that helps.

[sendpire]

that works fine thanks!

I added the following java script code I found in another thread so the header will turn white when scrolling:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$(‘.x-navbar-fixed-top’).css(“background-color”, “#fff”);
} else {
$(‘.x-navbar-fixed-top’).css(“background-color”, “transparent”);
}
});
});

it works, the header is transparent while on top and turns into a white header when I scroll down, but as soon as I get back to the top the header is fully transparent, how do I change that?

and another problem is that the transparent header works on all pages except for the woocommerce products overview page.

[Author]

Posts