Docs

[aerialassistant]

I am trying to remove the white space behind the navigation bar above the revolution slider.

Please take a look at the screenshot and this link: http://www.aerialassistant.com/contact/

Scroll down and you will see what I mean.

I have tried various options through the forum search with no luck.

Thanks.

[aerialassistant]

file attached

[aerialassistant]

Safari wouldn’t let me attach the image. This is with chrome…

[Rad]

Hi there,

Thanks for posting in and sure possible, please add this css at Admin > Appearance > Customizer > Custom > CSS.

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0px;
}

That white line is a gap between navbar and slider.

Thanks.

[aerialassistant]

I tried adding that and it did not work.

I have the following custom CSS:

.x-logobar{
display:none;
}

.x-navbar {
background-color: rgba(0, 0, 0, 0.7);
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-navbar {
border: none;
box-shadow: none;
}

.x-navbar .desktop .x-nav li>a>span:after{
display:none;
}

.x-navbar .sub-menu {
background-color: black;
color: #fff !important;
min-width: 50px;}

.x-navbar .sub-menu { top: 40px !important}

body .x-navbar ul.sub-menu li a {
font-size: 13px;;
}

.x-navbar .sub-menu{
background-color: rgba(0, 0, 0, 0.7);}

body .desktop .sub-menu {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

.x-navbar .sub-menu a:hover,.x-navbar .sub-menu .sfHover>a, .x-navbar .sub-menu .current-menu-item>a{
background-color: transparent;
}

li.current_page_ancestor > a span {
color: #04adf0;
}

.tp-video-play-button {
display: none !important;
}
.x-slider-container.below {
border: medium none;
}

[Rue Nel]

Hello There,

Please use this code instead:

.x-navbar-fixed-top-active .x-navbar-wrap {
    border: none;
}

Your custom css would be this:

.x-logobar{
  display:none;
}

.x-navbar {
  background-color: rgba(0, 0, 0, 0.7);
}

.x-navbar-fixed-top-active .x-navbar-wrap {
    border: none;
}

.x-navbar {
  border: none;
  box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.x-navbar .desktop .x-nav li>a>span:after{
  display:none;
}

.x-navbar .sub-menu {
  background-color: black;
  color: #fff !important;
  min-width: 50px;
}

.x-navbar .sub-menu { 
  top: 40px !important;
}

body .x-navbar ul.sub-menu li a {
  font-size: 13px;;
}

.x-navbar .sub-menu{
  background-color: rgba(0, 0, 0, 0.7);
}

body .desktop .sub-menu {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.x-navbar .sub-menu a:hover,.x-navbar .sub-menu .sfHover>a, .x-navbar .sub-menu .current-menu-item>a{
  background-color: transparent;
}

li.current_page_ancestor > a span {
  color: #04adf0;
}

.tp-video-play-button {
  display: none !important;
}

.x-slider-container.below {
 border: medium none;
}

We would loved to know if this has work for you. Thank you.

[aerialassistant]

Thanks for helping me troubleshoot this.

I tried your latest recommendation and it did not work.

[Christopher]

Hi there,

This code should work :

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0;
}

If it doesn’t help please resize the screen shots and upload them again, to make sure we are working at the issue you’re referring to.

Thanks.

[aerialassistant]

Screenshot 1

[aerialassistant]

Screenshot 2

[aerialassistant]

I tried adding the last bit of code but it did not work. I included two screen shots so that you can see what I am talking about. The issue is the white space behind the nav bar at the very top of the page.

[Christopher]

Hi there,

Navbar has transparent background color, it displays body background color when you scroll. if you don’t like transparent background, please find this code :

.x-navbar {
    background-color: rgba(0, 0, 0, 0.7);
}

And update it to :

.x-navbar {
    background-color: rgba(0, 0, 0, 1);
}

Hope it helps.

[aerialassistant]

Making it opaque does not solve my problem.

I need to have the nav bar at 70% opacity.

How do I remove that white space at the top of the page?

There has to be some way to drop the navbar down over the slider video.

Please advise.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-44 .x-slider-container.below {
    margin-top: -40px;
}

Note: This CSS is for the contact page. If you need it to apply on all pages with a slider below the navbar, just remove the .page-id-44 from the selector.

Hope this helps – thanks!

[aerialassistant]

That works perfectly.

Thank you so much for your help!

I’m sure this thread will help others in the forum.

[Author]

Posts