Navbar help - opaque on scroll & removing lines

Support
#1

My website is:

Summary

www.benjaminaproductions.com

I used this following code to make the navbar transparent, and then it turns white when i scroll -

CSS

.x-navbar {
     background-color: transparent;
     transition: background .5s ease-in-out;
}

.x-navbar.x-navbar-fixed-top {
     background-color: rgba(2555,255,255, 0.90);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);    
}

JS

jQuery(document).ready(function($) {

    $(window).scroll(function() {
        if ($(this).scrollTop() <= 0) {
          $('.x-navbar').removeClass('x-navbar-fixed-top');
}
});

});

A few things:

  1. When the navbar color comes in, i’d also like to change the color of the links
  2. Is it possible to get rid of the little lines between each link? Also, if you hover over ‘Party Plus’ the dropdown is not below - how would i fix this?

Thanks!

#2

Hi,

  1. Please remove backslash in your js code.

  1. To change link color on scroll, add this in Theme Options > CSS 
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
   color:red;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a:hover {
   color:blue;
}
  1. To remove lines, add this in Theme Options > CSS 
.x-navbar .desktop .x-nav>li>a {
    border-right: 0;
}

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 0;
}
  1. You can adjust sub menu position under Theme Options > Header > Navbar > Navbar Top Height

#3

Thanks, Paul!

The problem when I adjust the Navbar Top Height is that it gets rid of the effect i was going for, wherein the logo and menu are overtop of the video. Any recommendations?

Thanks!

#4

Hi There,

In that case, please add this to Theme Options > CSS

.x-navbar .desktop .x-nav > li ul {
    top: 60px;
}

Cheers!

#5

Thanks, friech! That did it :slight_smile:

I noticed that on the mobile version, there is still a white bar at the top - does that have to be there? Also, why am i not able to see the menu icon?

#6

Hi,

Kindly do the following.

  1. Set navbar top height to 60

  1. Change the code provided above with this.
.home .masthead  {
     position: absolute;
     width: 100%;
}

Hope that helps.

#7

Thank you!

#8

You’re welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.