Jump to content

Archived

This topic is now archived and is closed to further replies.

marcnevens

Fixed navigation bar - browser issue

Recommended Posts

marcnevens    0
marcnevens

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
James B    436
James B

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

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marcnevens    0
marcnevens

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
marcnevens    0
marcnevens

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • Dan P
      By Dan P
      I have noticed that the Fixed Navigation Bar is fixed only on screen resolutions from 800 x 600 or higher.  How can I ensure that the Navigation Bar sticks to the top of the screen when scrolling the page on mobile devices?
    • tborges
      By tborges
      Hello.
      How can I make my Fixed Navigation Bar be centered on Desktop? 
       
       
      Also, I want to make my pink scallop background to work. It's not working properly right now, see IMAGE #01 and IMAGE #02.  
       
      IMAGE #01
       
       
       
       
       
       
      When the navigation starts to jump to the second and third row, the image starts to repeating again. See IMAGE #02 below
      IMAGE #02
       
       
       
       
       
      This is the MOBILE version, the pink scallop background doesn't look good. See example IMAGE #03 below
      IMAGE #03
       
       
       
       
       
      MORE INFO:
       
      PageLines Framework Version 2.4.4
      Wordpress 3.7.1
×