Archived

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

  • 0

Resolved Font color for mobile menu


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;

Share this post


Link to post
Share on other sites

Posted · Report post

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.....

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

and....

to fix the changed link hover text color:


#site .navbar .dropdown-menu a:hover {

			 color: rgb(255, 255, 255);

}

Share this post


Link to post
Share on other sites

Posted · Report post

This documentation shows you how to change link colors: http://www.w3schools.com/css/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.

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites