Customizing the Navigation Menu

Menu Customize - No borders

For any website, one of the most used elements is the main navigation menu. This is used to navigate around the site, allowing users to find what they want to read.

This means that the most looked at element on your site will be the navigation menu, and you want yours to look perfect for your site.

Using the Thesis menu options you can customize your menu to some extent. You can change the colour, you can change the font and size.

Menu Customize - Change the Font

Menu Customize – Change the Font

Changes through CSS

To really customize it though we need to take a look at adding CSS changes. CSS allows us to also change the font and size, but it also allows us to do things like changing the colour and background colour. Removing the border. Relocating it on the right-hand side of the screen.

First, let’s look at some CSS that would allow us to change the font and size, similar to what we can do in the above option form.

.menu, .menu a
{
font-size: 18px;
font-family: Oswald;
}

Looking at the CSS, you can see we set the font size to be 18 pixels, and the font family to be Oswald.

Why would we do this through CSS? With a little more CSS code we can load in custom fonts which means we can set the font for the menu to something other than can be chosen from the form menu.

Next, let’s look at changing the background colour and the colour of the fonts themselves.

This first code changes the background colour to a grey

.menu
{
  background-color:#eeeeee;
}

Next, we will change the font colour to a nice blue

.menu, .menu a
{
  color: blue;
}

So, now we have some nice, 18 px blue menu text. We can change the weight to bold

.menu, .menu a {
  font-weight: bold;
}

These custom changes have already dramatically changed the look and feel of the menu, as can be seen in the image below.

Menu cusomized

Menu customized

Removing the border and moving the menu

Let’s do some more change to our menu by removing the border around the menu items and then finally moving the menu over to the right-hand side.

First, we remove the menu items borders with the following CSS:

.menu, .menu a
{
  border: none;
}

Once added, the borders around all the menu items are gone

Menu Customize - No borders

Menu Customize – No borders

Finally, we can move the menu from the left-hand side of the page to the right-hand side with one more CSS entry

.menu, .menu a
{
  float: right;
}
Menu Customize - Menu on right

Menu Customize – Menu on right

What have we learned

So, from this, we have learned that we can customize the navigation menu quickly and easily to change fonts, size, and colour. We can change the background, remove or change the border and its location.

There are more advanced CSS changes we can make which we may cover in a later post. For now, go and play with your custom CSS – ‘Thesis -> Custom CSS’

Note: The changes in this post are for the Thesis Classic Responsive skin. Although some of the visual builder elements may be the same for other skins – the CSS changes may not work for other skins.

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment