Jump to content

Archived

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

alisamski

Nav Bar CSS in Safari

Recommended Posts

alisamski

Hi,

 

I cannot seem to see navbar css color changes in the desktop version of safari?

Works fine in Firefox and Chrome and safari on mobile ios.

 

Anyone available to check?

 

Should show as a lite-grey to navy.

 

Here is the link. 

http://bit.ly/1hmq2oV

 

Thank you.

 

 

Share this post


Link to post
Share on other sites
James B

Hi there, I see it as white in safari.

 

Are you using the webkit prefix in your css? Can the hexes below using the webkit prefix and this should affect safari

 

.navbar.pl-color-grey {
  background-color:#F8F8F8;
  background-image:-webkit-linear-gradient(top, #FFFFFF, #EEEEEE);}


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
alisamski

Yes...

funny that it works on the ipad using Safari

 

 

.navbar.pl-color-grey {
    background-color: #001034;
    background-image: linear-gradient(#aaaaaa, #001034);
    background-repeat: repeat-x;
    border-top: 1px solid #001034;
    color: rgba(0, 0, 0, 0.5);
}
 

 

I'll try the webkit for background-image..

Share this post


Link to post
Share on other sites
alisamski

So did the webkit for safari on the desktop.. but showed up white in firefox...

 

Had to put both in for Firefox to show up... Does that sound right?

 

.navbar.pl-color-grey {
  background-color:#001034;
  background-image:-webkit-linear-gradient(top, #aaaaaa, #001034);
 border-top: 1px solid #001034;
}
.navbar.pl-color-grey {
    background-color: #001034;
    background-image: linear-gradient(#aaaaaa, #001034);
    background-repeat: repeat-x;
    border-top: 1px solid #001034;
    color: rgba(0, 0, 0, 0.5);
}

 

 

the safari on ipad ios shows up grey.. hmmm

Share this post


Link to post
Share on other sites
James B

Hi there, yes that's correct. The navbar gradient is cross browser code, so you'll need to add all the different lines for each browser. The full spectrum of the code used I've copied an example below for you.

 

.navbar.pl-color-black-trans { 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
alisamski

aaahhhh.

 

got it...

thank you.

Share this post


Link to post
Share on other sites
Danny

If you want to make your life easier, you should just use LESS CSS and the gradient mixin.

 

.my class {

     #gradient > .vertical(red, blue);

}

 

The #gradient > .vertical() will generate all browser compatible CSS, saving you a lot of time and effort.

 

http://docs.pagelines.com/advanced/less-css


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • jeomiland
      By jeomiland+
      Greetings
      I just migrated an old DMS2 site to PL5 at cassClayton.com. If you look at the site on Safari browser, you will see the top nav bar (NavPro) is white, but gets revealed as you start to scroll the page. NavPro is used in the Header section, then a Text section in which I have Shortcode for the Smart Slider3 plugin. Would have preferred to use a PL-compatible slider but found it difficult to get Flick and Impress slider to simply fill full screen, just height of images (they were filling whole screen, hence large black area filling in the rest).
      So seems on Safari that the load order of the plugin may be causing the Nav bar to be overwritten? or something. 
      Hoping someone can help?
      thanks...  (works fine on Chrome, Firefox, even Tor, just not Safari)
    • gregory.guz
      By gregory.guz+
      Hi ,
      I just noticed that the color picker has stopped showing up on my PL5 site ( please see attached image ) 
      Any idea what could be causing the problem?
       
      Thanks 
      Greg

    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • greatthingsllc
      By greatthingsllc+
      In Platform 5, Using Framework Section for Content , I have set the hyperlink colors in the CUSTOMIZE section.   However, none of the pages are properly displaying the link colors.   Just defaulting to black, and underline on hover.   I did not see where this would be controlled at the page level or lower
      Site    doritbrauer.com
      Thanks
      Josh

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

×