Changing the font size

  • I can’t seem to figure out how to change the font size on the navigation menu without also changing the font size of the body text on the pages.

    This is where I’m changing the font size:

    extarea, input {
    -moz-box-sizing: content-box !important;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-family: inherit;
    font-size: 100%;

    I want to change the font on the navigation menu to make it about half the size it currently is, leaving the body text the same as it is now.

    My site is: https://www.maxiselfstore.com

    Any help would be much appreciated as I am very new to stylesheets – I’m using Firebug which does make life a little easier.

    In addition, if you hover over the navigation menu, each one is highlighted with a grey strip – I would like to change the colour of that strip but Firebug can’t seem to find it – any suggestions?

    Thanks in advance for anyone who can help!

Viewing 1 replies (of 1 total)

  • OK, if you right-click on a menu item and inspect it, you should have noticed that the correct selector for the menu text is .main-navigation a. So to change the font size of just the menu items, add this to your custom CSS:

    .main-navigation a {
   font-size: 11px;
}

    The body has a font size of 14px. Half of that (7px) is pretty small, I would go with maybe 10px or 11px.

    In addition, if you hover over the navigation menu, each one is highlighted with a grey strip – I would like to change the colour of that strip but Firebug can’t seem to find it – any suggestions?

    Firebug has a neat little feature that allows you to simulate a mouseover (hover) event. When you right-clicked on a menu item to inspect it, you’ll notice that the menu item gets a dotted line drawn around it, and a black box appears with three sections. The middle part has a lower case a, because you are inspecting an anchor element. The right part has a drop-down list. If you click on the right part and click on :hover from the pop-up menu, Firebug has now set the menu item to a hover state. The middle part of the black box now reads a:hover. The CSS in the right pane now displays the CSS selector that’s being used for an anchor tag in a hover state: .main-navigation .menu > li:hover > a, with a background color of background-color: rgb(178, 0, 0);. So all you need to do is write your own CSS rule like this to change the color:

    .main-navigation .menu > li:hover > a {
    background-color: rgb(178, 0, 0);
}

    An rgb value of 178, 0, 0 is the same as #b20000, so use whichever style you prefer.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing the font size’ is closed to new replies.