Jump to content


Photo
Resolved

Font color for mobile menu

font color mobile

  • Please log in to reply
9 replies to this topic

#1 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 01 October 2012 - 01:34 PM

Hi,

Due to browser compatability issues with the black transparent top menu, I use the light grey one. This is great for browsers but the mobile menu has white text and makes it unreadable.

Does anyone know the custon css i can use in Pagelines lite?

Many thanks

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 October 2012 - 04:00 PM

This documentation shows you how to change link colors: http://www.w3schools...ss/css_link.asp

However, to take advantage of the browser specific plugin, which allows you to change CSS for different devices (internet browsers and phones), you will need to upgrade to PageLines Framework.

#3 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 02 October 2012 - 11:04 AM

Hey Catrina,

Thanks for your reply. The menu link color is fine in standard size; only when the menu is condensed (or collapsed i think PL calls it) the links go white which makes them unreadable against the grey background.

I am building a website for a charity and cannot spend $139 for this only benefit.

If you point me toward any custom css i could use to fix this I would be most grateful.

Regards,

Matt

#4 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 02 October 2012 - 11:13 AM

This is one of the offending styles: removing the bold line fixes the "child" menu items but not the parent

#site .navbar .dropdown-menu a {
padding: 6px 15px;
background: none repeat scroll 0% 0% transparent;
color: rgb(255, 255, 255);
border-radius: 3px 3px 3px 3px;

#5 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 02 October 2012 - 11:16 AM

and the one for the parent menu items:

#site .navbar .navline > li > a {
margin-bottom: 2px;
padding: 6px 15px;
background: none repeat scroll 0% 0% transparent;
color: rgb(255, 255, 255);
border-radius: 3px 3px 3px 3px;
}

if only i could figure out how to fix this is the custom code css so im not hacking up PageLines core files.....

#6 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 02 October 2012 - 11:24 AM

sorted!!

I put this in custom css

 #site .navbar .navline > li > a {    color: rgb(0, 0, 0);}#site .navbar .dropdown-menu a {    color: rgb(0, 0, 0);}

:D

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15215 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 October 2012 - 12:01 PM

The topic was marked as resolved.

#8 biltonsilver

biltonsilver

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 02 October 2012 - 12:07 PM

and....

to fix the changed link hover text color:

 
#site .navbar .dropdown-menu a:hover {
			 color: rgb(255, 255, 255);
}


#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 October 2012 - 09:45 PM

Excellent.

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 October 2012 - 09:45 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, font color mobile