TUTORIAL

Adjust the navigation bar

Welcome to another tutorial on my website. This time it’s about the navigation bar and how to adjust the colors, size of the links and the horizontal position of the topics within the bar.

Introduction

Many times people ask how to adjust the navigation bar as there are actual no options in the theme available yet. Therefore I wrote this tutorial which shows you the basics how to change the navigation bar into the look and feel you like.

There are way to many option to cover all of them here and the taste of people is very diverging. But I selected the most important options for you. And there are no answers here to add or remove something. In this tutorial I will show you how to:

  • Seize the main links
  • Color the main menu and sub menu links
  • Color the background of main menu link
  • Size the submenu links
  • Change the width of the sub menu bar
  • Color the background of the sub menu link
  • Color the background of the navigation bar
  • Center the navigation bar
  • Center the main menu links within the navigation bar
  • Adjust the navigation bar

To have a better overview of all the CSS changes I divided the tutorial in three main section

  • Main Menu
  • Sub Menu
  • Navigation Bar

So let’s get started with the:

MAIN MENU

1) Size the main links

There are two important objects to target in the list: the text-transform which is set to „uppercase“ by default and the font size of the links:

#access ul {
text-transform: uppercase;
font-size: 20px;

2) Color the main menu and sub menu links

To change any of the colors of the main menu links in the menu you can add this to your CSS part:

To change the link color:

#access a {
color:#FF0000;
}

To change the color when hovering over it:

#access a:hover {
color:#00FF00;
}

To change the color of the selected topic:

#access li.current-menu-item > a {
color:#0000FF;
}

To change the color of the optional description below the main menu link:

#access a span {
color:#00FFFF;
}

3) Color the background of main menu link

#access a:hover, #access li.current_page_item > a, #access li.current-menu-item > a {
background: #FF0000;
}

SUB MENU

4) Size the submenu links

The lines to resize  are self-explanatory:

#access a span {
font-size: 11px;
font-style: italic;
font-weight: normal;
line-height: 1.62em;
text-transform: none;
}

5) Change the width of the sub menu bar

This needs three adjustments as we have the length of the sub menu bar and the hover function when the mouse is over a topic. The following adjustment is just an example and you have to adjust the minimum and maximum width of the bar for your specific needs.

First the hover effect of the bar:

#access li li a {
min-width: 50px;
max-width: 100px;
}

And now for the bar itself:

#access li li {
min-width: 50px;
max-width: 100px;
}

At least the shadow line must be adjusted:

#access li ul {
min-width: 50px;
}

Make sure, that both parameters of the hover bar and the bar itself have the same number. In both cases the min-width and max-width should be the same.

6) Color the background of the sub menu link

To change the background:

#access li li a {
background: rgb(230, 35, 35);
}

To change the background when hovering over the sub menu link:

#access li li a:hover {
background: #444;
}

NAVIGATION BAR

7) Color the background of the navigation bar

#access {
background: #FF0000;
}

8) Center the navigation bar

Well this one is a little more tricky as you need to know the width of the container holding your navigation bar. But for most of you guys this shouldn’t be a problem at all. Remember that the container mentioned is not the width of your blog but only the width of the part that holds the navigation. Thats an essential difference.

Here is what you have to add to your CSS:

div.menu-main-container {
margin-left:auto;
margin-right:auto;
width:667px;
}

As I said before, the width depends on YOUR nav container. 667px is just an example. And don’t forget to adjust this number as you add or delete navigation topics.

9) Center the main menu links within the navigation bar

After centering the whole bar, why not centering the the main menu links:

.menu-item a {
text-align:center;
}

10) Adjust the navigation bar

In case you only want to shift the whole menu bar a little more to the right you can do this with the second number in the padding (example 30px, default 20px). If you don’t add the following lines to your CSS the navigation bar will have a default padding of 20px. I did this with my site about +10px because I saw that the logo was not in line with the bar.

#access {
padding:0 30px;
}

If you you a padding of 30px, like this example, your navigation bar will shift a little to the right.

As I mentioned at the beginning of the tutorial: I tried to cover the main options for the navigation bar, sure there are much more. As I’m not longer with the great Pinboard theme there won’t be any updates anymore.

Nevertheless I hope you like the tutorial and it was helpful for you.

Cheers,
Alexander