Diffrent Menu link color for diffrent pages

Comments

• Albert

  December 2015

  Hi,
  
  this can be done with custom css. If you will send us link to example page, we tell you how this can be done.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mcontes

  January 2016

  Here it is.

  
  

  [Links visible only for registered users]
  

  
  

  AS you can see there is no problem in the home page but then other pages with white backgrounds you cant see the link text.
• Albert

  January 2016

  Ok. So to change menu link color on inner pages, please use extra css:

  body:not(.home) #Top_bar .menu > li > a { color: #000 !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mcontes

  January 2016

  Worked like a charm except 2 things

  1. Since i have another inner page with dark photo background i cant see the text link. Here is the link [Links visible only for registered users]
  2. the Hightlighted link text is black when it should be white.

  Can you help me out with this please? 
• Albert

  January 2016

  Hi,
  
  To change color & hover color please use below css with your page ID

  body.page-id-32 #Top_bar .menu > li > a {
      color: #ffffff !important;
  }
  
  body.page-id-32 #Top_bar .menu > li.hover > a {
      color: #000000 !important;
  }

  Thanks!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mcontes

  January 2016

  Thanks! It worked. I can now change menu color text on individual pages thats great, but with the top CSS i still have 2 little problems.

  
  

  1. Menu Link text on selected page is black when it should be white when selected

  See Example: [Links visible only for registered users]

  
  

  2. Since all header menus on mobile devices have white backgrounds and text is also white the user can't see them.

  See example: [Links visible only for registered users]

  
  

  How can i have Black Text, white text on hover, and white text link when selected on mobile responsive menu?
• Albert

  January 2016

  1. Are you sure that you used proper css for that page? Please provide the link to page where you changed menu items color with custom css so we can have a look on it.
  
  2. You can change menu background color on mobile then:

  #Top_bar #menu { background: #000 !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mcontes

  January 2016

  1. Yes. [Links visible only for registered users]

  
  

  2. Changed the Background but still having the problem with the page i previously changed the text to black. Now users cant see the menu because background is black and text is also black.
• Albert

  January 2016

  1. We did checked that page and looks like everything is fine on this page. The css is:

  body.page-id-23 #Top_bar .menu > li > a {
      color: #000000 !important;
  }
  
  body.page-id-23 #Top_bar .menu > li.hover > a {
      color: #ffffff !important;
  }

  and it works exactly that way. Menu items are black (#000000) and are white (#FFFFFF) on hover.
  
  2. So what you want to to exactly? Change menu items color to white on mobile? If that's what you mean, use:

  @media only screen and (max-width: 767px) {
      #Top_bar #menu ul li a { color: #FFF !important; }
  }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next