Jump to content

Archived

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

alisamski

Nav Bar CSS in Safari

Recommended Posts

alisamski+    8
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    436
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+    8
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+    8
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    436
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+    8
alisamski

aaahhhh.

 

got it...

thank you.

Share this post


Link to post
Share on other sites
Danny    1,327
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

    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • pehja
      By pehja+
      It would be nice to have an option in the impuls section to only view hamburger menu.  That or let nav pro have that option ad also transparent background. Impuls is a great section. Love it.
×