Code Monkeys

# VuePress Tutorial 13 - Navbar Styling

By: Jay the Code Monkey
•Posted: Sep 11, 2022 •Updated: Apr 18, 2023

# What We're Doing

Currently, the navbar is not looking too good, so in this tutorial we're going to begin fixing that by adding some styling. We're going to be targeting these CSS classes provided by the default theme (opens new window): navbar, site-name, links, search-box, nav-links, nav-item, and dropdown-title.

To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.

Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.

When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.

You can view all of the code in this tutorial by going to the tutorial-13 branch of the code-monkeys-blog-tutorials (opens new window) repository.

Alright, now we're ready to begin styling the navbar.

# HTML Location

We're going to start by locating where the navbar class is in the HTML:

From the HTML above we can see that the navbar class is attached to a header tag and is a child of the div tag with a class of theme-container.

# Styling

This means in the index.styl file we can nest the navbar class inside of the theme-container class and apply the following styles:

  • display: flex defines a flex container for all of the direct children of the header tag with a class of navbar.
  • align-items: center vertically centers the flex items, i.e., the direct children of the header tag with a class of navbar.
  • height: 4.5rem sets the height of the navbar to be 4.5rem.
  • background-color: $backgroundColor sets the background color of the navbar to be $backgroundColor which is a global styling variable we set in the palette.styl file.
  • border-bottom-width: 0.125rem sets the border bottom width of the navbar to be 0.125rem.

# Site Name Class

After locating and styling the navbar class, we're ready to move on to the site-name class.

# HTML Location

Here's the location of the site-name class in the HTML:

From the HTML above we can see that the site-name class is attached to a span tag and is a child of the a tag with a class of home-link which is a child of the header tag with a class of navbar.

# Styling

This means in the index.styl file we can nest the site-name class inside of the navbar class and apply the following style:

  • font-size: 1.5rem sets the font size of the site name in the navbar, i.e., Code Monkeys to be 1.5rem.

We're now ready to style the links class.

# HTML Location

Here's the location of the links class in the HTML:

From the HTML above we can see that the links class is attached to a div tag and is a child of the header tag with a class of navbar.

# Styling

This means in the index.styl file we can nest the links class inside of the navbar class and apply the following styles:

  • background-color: transparent sets the background color behind the search box and of the links on the right side of the navbar to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the links class.
  • height: 3rem sets the height of the div tag which contains the search box and the links on the right side of the navbar to be 3rem.
  • align-items: center vertically centers the flex items, i.e., the direct children of the div tag with a class of links which was given a style of display: flex by the default theme (opens new window).

# Search Box Class

We've finished styling the links class, so let's begin the styling of the search-box class.

# HTML Location

Here's the location of the search-box class in the HTML:

From the HTML above we can see that the search-box class is attached to a div tag and is a child of the div tag with a class of links.

# Styling

This means in the index.styl file we can nest the search-box class inside of the links class and apply the following styles:

  • margin-right: 1.5rem adds a margin of 1.5rem to the right of the search box.
  • font-size: 1.125rem sets the font size of the text in the input tag to be 1.125rem.
  • background-color: transparent sets the background color of the input tag to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the input tag.
  • border-width: 0.125rem sets the width of the border around the input tag to be 0.125rem.
  • color: $textColor sets the color of the text in the input tag to be $textColor which is a global styling variable we set in the palette.styl file.

Viewing the font-size and color Styles

To see the font-size and color styles in action try typing some text in the search box. Once you click in the search box, notice the border gets its color set to the $accentColor which is a global styling variable we set in the palette.styl file. This effect is provided by the default theme (opens new window) and uses the focus pseudo-class.

Now that we have styled the search-box class and its child input tag, we're ready to move on to the styling of the nav-links class.

# HTML Location

Here's the location of the nav-links class in the HTML:

From the HTML above we can see that the nav-links class is attached to a nav tag and is a child of the div tag with a class of links.

# Styling

This means in the index.styl file we can nest the nav-links class inside of the links class and apply the following style:

  • font-size: 1.25rem sets the font size of the nav links on the right side of the navbar to be 1.25rem.

We're now ready to style the nav-item class.

# HTML Location

Here's the location of the nav-item class in the HTML:

From the HTML above we can see that there are four nav-item classes. Each one is attached to a div tag and is a child of the nav tag with a class of nav-links.

# Styling

This means in the index.styl file we can nest the nav-item class inside of the nav-links class and apply the following styles:

  • .nav-item:first-child applies the first-child pseudo-class to the .nav-item selector. The first-child pseudo-class applies the styles defined inside of it to the first element among a group of sibling elements which in our case is the first div tag with a class of nav-item in the group of sibling div tags that have the class of nav-item.
  • margin-left: 0 adds a margin of 0 to the left of the first div tag with a class of nav-item within the group of sibling div tags that have a class of nav-item.
  • margin-left: 1.75rem adds a margin of 1.75rem to the left of all of the div tags that have a class of nav-item except for the first one since that is being styled by the first-child pseudo-class.

After finishing the styling for the nav-item class, we're now ready to move on to the styling of the dropdown-title class.

# HTML Location

Here's the location of the dropdown-title class in the HTML:

From the HTML above we can see that the dropdown-title class is attached to a button tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.

# Styling

This means in the index.styl file we can nest the dropdown-title class inside of the nav-item class and apply the following style:

  • font-size: 1.25rem sets the font size of the dropdown title, i.e., Posts to be 1.25rem.

If you have questions about the CSS discussed above, then check out these resources:

# Next Steps

In the next tutorial we'll be styling the dropdown menu in the navbar by updating the background color, border, padding, etc.

Made by & for Code Monkeys 🐵