Adjusting the navbar icon color

You might note that the icons appear visually heavier than their adjacent text. The color is the same, but the icons carry greater visual weight. Let's adjust the icons to a lighter and less overpowering shade.

  1. Open _navbar.less in your editor.
  2. Search to find the selector .navbar-default. We have used this class in our navbar markup to apply default styles. You should find it under the commented section for // Alternate navbars.
  3. Within this nested set of rules, find the selector .navbar-nav and the > li > selector nested beneath it. This is where we want to adjust our icon colors.
  4. Under the statement defining nav item link colors, we'll nest a rule to make our icons a lighter shade, using our variable @gray-light, as follows:
    .navbar-nav {
  > li > a {
    color: @navbar-default-link-color;

    .icon { // added rule set
      color: @gray-light;
    }

    Tip

    The generic class icon proves to be a handy way to select all of our icons.

    Note

    I've begun adding a comment // added to help me easily search or scan to identify code that I've added into the mix.

  5. Now, we need to specify that these icons should still share the same hover and active color—the @brand-primary color. This requires adding our icons to the selector groups just below the lines we've added. Under the &:hover, &:focus pseudo-selectors, I've added two selectors to specifically target the icons:
    &:hover,
&:focus,
&:hover .icon, // added selector
&:focus .icon { // added selector
  color: @navbar-default-link-hover-color;
  background-color: @navbar-default-link-hover-bg;
}

    I've targeted the icons for active links in the following code snippet:

    > .active > a {
  &,
  &:hover,
  &:focus,
  .icon, // added selector
  &:hover .icon, // added selector
  &:focus .icon { // added selector
    color: @navbar-default-link-active-color;
    background-color: @navbar-default-link-active-bg;
  }
}
  6. Once you've worked these in, save the file, compile to CSS, and refresh your browser. You should see the icons take a lighter shade of gray by default, and yet retain the default link color for active and hovered states.
    Adjusting the navbar icon color

This completes our nav—or almost completes it. We've inadvertently created a small problem that we need to fix before moving on.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset