How can you alter the main nav titles colour and font via the CSS in Swell?

• 

  laurapalmerwp · Member · Dec 27, 2014 at 2:11 pm

  • Copy link
  • Add topic to favorites

  I’ve tried altering the active and hover states in the css and that doesn’t have any effect. Also would like to alter the font to be the same as the main heading style – League Gothic.

  The blog I need help with is: (visible only to logged in users)

• 

  jeremeylduvall · Member · Dec 29, 2014 at 7:09 pm

  • Copy link

  Hi!

  This should do the trick:

  .wf-active #main-nav ul a:hover {
  	color: red;
  }

  You can change out a:hover for a:visited, a:active, and so one. Can you give that a try under Appearance -> Customize -> CSS?

  Also, just a note, we have a whole forum devoted to CSS Customizations here:

  https://en.forums.wordpress.com/forum/css-customization

  That might come in handy for future use!

• 

  jeremeylduvall · Member · Dec 29, 2014 at 7:10 pm

  • Copy link

  Also, in regards to changing the font, you can do that through the method here:

  http://en.support.wordpress.com/custom-design/custom-fonts/

  Sorry I missed that portion of your question originally!

• 

  laurapalmerwp · Member · Dec 30, 2014 at 2:43 pm

  • Copy link

  Hi,

  Thanks for your help. From your original email, I worked out how to check out the css in the inspect element thing anyway and worked some of the styles out from that – but there’s always something I can’t quite do – not being a programmer!

  I have now however altered the nav font and some of the states – but can’t do the down state. With the css below, it ought to be gold when in that state – but it remains the brown colour I’ve used otherwise..

  .wf-active #main-nav ul a:active {
  font-family: league-gothic-1, league-gothic-2, “Open Sans”, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  color: #c0a02f;

• 

  jeremeylduvall · Member · Dec 30, 2014 at 5:44 pm

  • Copy link

  Hi!

  Instead of using the a:active attribute, give this a try:

  .wf-active #main-nav ul li.current_page_item a {
       color: #c0a02f;
  }

  That should do the trick!

• 

  laurapalmerwp · Member · Dec 31, 2014 at 2:31 pm

  • Copy link

  It did – thanks!

• 

  jeremeylduvall · Member · Dec 31, 2014 at 10:22 pm

  • Copy link

  Wonderful!