Jump to content


Photo
- - - - -

Fixed navigation bar - browser issue

Fixed navigation bar

  • Please log in to reply
4 replies to this topic

#1 marcnevens

marcnevens

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 15 January 2014 - 11:13 PM

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

 



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 January 2014 - 01:27 AM

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′);

}



#3 marcnevens

marcnevens

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 16 January 2014 - 07:42 PM

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



#4 marcnevens

marcnevens

    Newbie

  • Members
  • Pip
  • 8 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 16 January 2014 - 08:32 PM

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



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2014 - 12:47 AM

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);
}







Also tagged with one or more of these keywords: Fixed navigation bar