• 0

Mobile menu background color and font color


Question

Posted · Report post

While trying to change BG color and font color of the dropdown menu of mobile , I identified the specific section and css codes like this >> http://screencast.com/t/HYGvSGgkbMr

 

So I used the following code  >>

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

which is not working!

 

Then searching the forum , I found the following code from here >>http://forum.pagelines.com/topic/22289-font-color-for-mobile-menu/

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

This isn't working too!

I'm referring to background and font color

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted · Report post

please link us to your site so we can look at this for you ourselves. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

techgainer.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thank you. 

 

Ok so you you have the correct CSS in the first place - the second lot of CSS you added is taken from a forum for a completley different PageLines product (the PageLines Framework) http://screencast.com/t/yZMnrLySMEh

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org/css-validator/#validate_by_input

 

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

 

The red text here is incorrect. 

 

The CSS you pasted in the forum before that - works for me 

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

please see here. http://screencast.com/t/By7FLhJM

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hey! IT working in console for me too! 

But not working when in custom css!

Here's all of my codes from my custom css >>

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

//not working
//.SideSocialLikeButtons {
//  border-top:solid;
//border-color:#cbd2d6;
//}

//rmv spc
.SocialFont .mediabox-wrap {min-height: 0px;}
.SocialFont .the-media {margin-top: 0px}

//disable the view of taggs
.tags {display: none;}


//adding Border
.abox .media.author-info {
border-top:solid;
border-color:#cbd2d6;
border-bottom:solid;
border-color:#cbd2d6;
}

//Removes space from headerlogo bottom(the logo made with mediabox html)
//from my forum post
.the-media-html p { margin: 0; }

//Used to Disable "visit author's website" beneath author box
.author-details {display:none}

//Used to disable author thumbnail link author box. Referral: http://goo.gl/vAmR1r and http://goo.gl/iMmGB
  .thumbnail {pointer-events: none;cursor: default;text-decoration:none; width: 95px; height:95px;}

//Used to control the color of the label "AUTHOR" in Author box
.author-note {font-size: 13px; color: #404040;}

//image frame type control in post excerpts  ....regards: http://goo.gl/Q59CNS and http://docs.pagelines.com/tutorials/html-css-utilities
//.img-polaroid .attachment-thumbnail.wp-post-image, .entry_content img { border-radius: 50%;
// -webkit-border-radius: 50%; -moz-border-radius: 50%;}
//learn css to make it squire! polaroid!

//change navbar color
//code from http://forum.pagelines.com/topic/32904-navbar-color/?hl=navbar
//my thread 
#site .navbar {background-color: #252525; 
 //color: #ffffff;
//background-image: none;
//box-shadow: none;
//border-top: none;}
//ff6400

//changing header color http://forum.pagelines.com/topic/33192-header-color-changing-code-not-working/#entry196850    violate:#5e2750
#header .pl-area {background-color: #252525;}

//Controling metabar font....refer: http://forum.pagelines.com/topic/33170-metabar-font-size/
.post-meta .metabar em { font-size: 110%; }

//Global Navbar font control with custom class
.SectionOfGNavBar {font-size: 120%;}

//gnav bar font color white http://forum.pagelines.com/topic/33202-cannot-change-navbar-font-color/#entry196882
.navbar.pl-color-base .navline > li > a {  color: white;}

//Change Footer color and font control
.footerbgClr {background-color: #252525; color: white;}
.footer-simp-nav {font-size: 105%;}

Do you think anything here conflicting?

Edited by rijans

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org/css-validator/#validate_by_input

 

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 

 

 

Also 

 

 

comment out your css with  /* */ 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i try and type this with the utmost respect to you and your work - All your recent posts have been related to CSS syntax issues,. I suggest taking a course in CSS as nearly everyone else has had to, using the validator and online tools etc. 

 

we cannot help you fix your purely CSS related issues but we can support you using DMS. CSS was not 'created' by us and therefore we cannot support just purely that. 

 

The are many many websites and forums with resources relating to CSS support. 

 

Also please use the pastebin feature when pasting rafts of Code to the forum. 

 

EDIT = you can paste anything you like here but we may not be able to support it is what i meant 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks 

 

all that aside - have you got this working? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'll keep you posted! Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

I'v tried it on test site http://sb.techgainer.com/ where everything is fresh and no single customization in dms!

It only working in console >> http://screencast.com/t/gBcEHWOBl3r

BUt

The code 

#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}

http://screencast.com/t/Lxz2evs19

Isn't working there too! and nor the code 

#body .pl-mobile-menu {

   background: #252525;
   color: #FFFFFF;
}
Edited by rijans

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok - if you create me an admin logon for your site and send the credentials to hello at pagelines dot com i will take a look for you. can you make sure you put the URl for this topic in the email so if anyone else picks up the email it will tie up with the topic :) 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies 

 

Done with your request. Check it out plz

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've looked at your code. The Hex value for #252525 is black, so its not really different from the default, what color are you trying to make the nav?

 

Try something like

 

body .pl-mobile-menu {
   background: #4312e3 !important;
   color: #FFFFFF !important;
}

 

This is bright blue and you should see the code working correctly. If you're testing in another browser, you might need to flush the LESS first in settings > reset > flush less before viewing in the other browser and seeing the changes.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

James B Not working it too! I flushed several times

Edited by rijans

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you paste in the exact code you are inputting please?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, something in your custom code above must be incorrect then and its stopping the code below from being read. I've just tested that code provided on my test site in the custom css panel and its working.

 

Try copy/paste all your custom css into a blank text doc so you have a coy saved. Then delete it from the site and insert the mobile menu code only and test. Once you've done that you can paste back your other code in sections to find the part where its breaking.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B I'v tried the code on a fresh site too where no customizations! not worked!

 

BTW I no more want to mess with you guys about this! Thanks for your times! :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi rijans

I see your code, the James B code have "!important", you can make a probe with

 

#body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}

or 

body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now