0

I'm a beginner currently working on creating my own navbar on my home page and am having some issues changing the font (color, font-family etc).

By default, the links in my nav bar (home, contact, store etc) are formatting as links, as they are links. I've gone into my style.css file and declared a new ID, a.nav {} but I'm not sure how to make my navbar use this instead of the default a {}.

This is the code I have in my header.php file:

    <nav class="site-nav">
     <?php
     $args = array(
      'theme_location' => 'primary'
      );
     ?>
     
            <?php wp_nav_menu(  $args ); ?>
          </nav>
  </header>

This is the code I have in my style.css file:

## Links
--------------------------------------------------------------*/
a {
 color:#000;
}

a:visited {
 /*color:#454545;*/
}

a:hover,
a:focus,
a:active {
 color: #fff;
 text-decoration:bold;
}

a:focus {
 outline:none;
}

a:hover,
a:active {
 outline: 0;
 
}

/* Links - home.site-nav */
a.nav:link {
 font-family: montserrat;
 font-weight: 100;
 font-style: normal;
 color:#fff;
}

a.nav:visited {
 /*color:#454545;*/
}

a.nav:hover,
a.nav:focus,
a.nav:active {
 color: #fff;
 text-decoration:bold;
}

a.nav:focus {
 outline:none;
}

a.nav:hover,
a.nav:active {
 outline: 0;
 
}

What I want is for my nav bar to use the newly declared a.nav class instead of the a. Any ideas?

chris_852
  • 11
  • 2
  • 3
  • So add the class to all of the selectors in your CSS file. Is this what you are asking about? It's not clear what problem you are having when trying to use a CSS class. Note that your class name is not `nav`, it's `site-nav`. – takendarkk Sep 05 '17 at 13:58
  • Why not just style the ` – FluffyKitten Sep 05 '17 at 13:59
  • Or use existing selectors and specify enough of them while declaring your rules to over-qualify any default or vendor styles applied. – UncaughtTypeError Sep 05 '17 at 13:59
  • `a.nav` targets "links with `class="nav"` but I'm not seeing anywhere in your markup where you've utilized this class. – jswebb Sep 05 '17 at 14:00
  • @jswebb Thats the question - the OP wants to know how to add that class in. – FluffyKitten Sep 05 '17 at 14:15

2 Answers2

1

if I were you, I'd opt for 

.site-nav a { 

color:black;
font-size: 15px; 
/*etc*/

}

Rather than creating a new class. That should work for the links in the menu, without the need to edit the HTML itself.

Be aware, however, that the style.css file will be reset every time Wordpress or your theme updates, so make sure you have a backup. (Or you can create a child theme, but if you're new to Wordpress, I wouldn't recommend that).

Tijmen
  • 542
  • 1
  • 6
  • 29
  • This worked perfectly! Thank you so much for your help. As my above post says, I'm a beginner, so this never really occurred to me. :) – chris_852 Sep 05 '17 at 14:39
  • I've backed up all of the files that I've edited, and also have installed a plugin to stop theme updates. Thanks for the tip, I wasn't aware of that! – chris_852 Sep 05 '17 at 14:55
0

Any changes made directly to the themes style.css will be overridden by next theme's update. Therefore, it's better to add your custom CSS under Customise > Additional CSS.

Next, we need to understand what takes precedence in CSS. We need to keep in mind these 4 rules (better explained here).

  1. Inline css ( html style attribute ) overrides css rules in style tag and css file.
  2. a more specific selector takes precedence over a less specific one.
  3. rules that appear later in the code override earlier rules if both have the same specificity.
  4. A css rule with !important always takes precedence.

In your example, to make sure your style takes precedence it needs to be inside this block and it's variations (hover, active...etc):

nav .site-nav a {
}

And if you can't see any changes still, you can add !important next to the property. Example: color: #fff !important;.

Hope this helps. Good luck!

Community
  • 1
  • 1
Sheedo
  • 524
  • 5
  • 13
  • 1
    People shouldn't use `!important` 'just to be safe'. The `!important` flag should only be used [as a last resort](https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property#8360237), in order to maintain future updateability. – Tijmen Sep 06 '17 at 08:59
  • 1
    @Tijmen you're right about that; edited my answer. Thanks for your input. – Sheedo Sep 06 '17 at 09:51