• 0
Sign in to follow this  
Followers 0

Fixed navigation bar - browser issue


Question

Posted · Report post

Hello,

 

I have installed pagelines Framwork v 2.4.4 with WP 3.8. I also activated the browser specific plugin.

 

I changed the color of the fixed nav bar in the top of the site.(from blue to white) with custom css

.navbar.pl-color-blue {
    background-color: rgb(255, 255, 255);
    background-image: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(255, 255, 255));
    background-repeat: repeat-x;
    border-top: 1px solid rgb(0, 38, 73);
}

In Firefox everything looks fine, but not in Chrome en IE.  The fixed navigation bar has still the blue color.

 

My site url is http://nguvu.byethost15.com/

 

Could you help me in order to solve this problem.

 

Regards,

 

Marc Nevens

 

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi Marc 

 

 

The code for IE is cross browser, depending on which inspector you're using to see the code it might not show the full css for the navbar.

 

Please see the full code for the navbar below including the code for older version of ie, edit the color values to fit.

 

.navbar.pl-color-blue  { background-color: rgba(0, 0, 0, 0.12);
background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);
border-top: 1px solid rgba(0, 0, 0, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello,

 

I copied the css into the custom css and I changed the color to white: see code below, but still the same. Nothing changed in Chrome and IE.

.navbar.pl-color-blue { 
background-color: rgba(255, 255, 255, 0.12);
background-image: -moz-linear-gradient(top,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.9));
background-image: -ms-linear-gradient(top,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.9));
background-image: -webkit-gradient(linear,255 255,255 100%,from(rgba(255, 255, 255, 0.8)),to(rgba(255, 255, v, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.9));
background-image: -o-linear-gradient(top,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.9));
background-image: linear-gradient(top,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(255,255,255,0.8)’, endColorstr=’rgba(255,255,255,0.9)’, GradientType=0);
border-top: 1px solid rgba(255, 255, 255, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);
}

Could you tell me what I did wrong?

 

Regards,

 

Marc

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello James,

 

I just saw that I have following message:

 

parse error: failed at `filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(255,255,255,0.8)’, endColorstr=’rgba(255,255,255,0.9)’, GradientType=0); ` line: 997

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've just tried the following using hex colors instead of rgba values and it's worked without a parse error showing. Try deleting the previous code and using the below. Make sure you have the closing bracket in place etc.

 

Screenshot - http://screencast.com/t/aldyFgdo7Lf

 

.navbar.pl-color-blue {
border-top: 1px solid #0AFF31;
background-color: #66E534;
background-image: -moz-linear-gradient(top,#66E534,#66E534);
background-image: -ms-linear-gradient(top,#66E534,#66E534);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#66E534),to(#66E534));
background-image: -webkit-linear-gradient(top,#337EFF,#66E534);
background-image: -o-linear-gradient(top,#337EFF,#66E534);
background-image: linear-gradient(top,#337EFF,#66E534);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66E534',endColorstr='#66E534',GradientType=0);
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0