How can I customize certain items inside of a navigation bar in CSS?

Question

I'm trying to make a navigation bar but I'm having a lot of trouble making changes to separate elements without changing every single item in the nav bar.

For example, if I wanted more padding/space between for only one element in the nav bar (in between the name and other elements such as projects, resume, etc), how would I achieve that? Or even if I wanted to change the text size for a single item in the nav bar (Make first name bigger than the rest).

Here is the HTML:

<div class="navbar">
    <a href="#First Name">First Name</a>
    <a href="#Projects">Projects</a>
    <a href="#Resume">Resume</a>
    <a href="#About">About</a>
</div>

Here is the CSS:

    .navbar {
        overflow: hidden;
        background-color: white;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        border-bottom: 1px solid black;

    }

    .navbar a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 30px 16px;
        text-decoration: none;
        font-size: 200%;
    }

You may use `:nth-child` or `:nth-of-type` selector but maybe it would be better to assign additional class to elements that need to have special styles. So in case when you modify navbar styles would not mess. — Sergiy T., Jan 20 '21 at 09:25

score 2 · Accepted Answer · answered Jan 20 '21 at 09:25

One way is with :first-of-type or nth-of-type(1). This selects, in this case, the first anchor element inside of navbar. You can change the argument in nth-of-type to select any element in the menu.

.navbar {
  overflow: hidden;
  background-color: white;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  border-bottom: 1px solid black;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 100%;
}

.navbar a:nth-of-type(1) {
  padding-right: 20px;
  background: #777;
  font-size: 2em;
}

<div class="navbar">
  <a href="#First Name">First Name</a>
  <a href="#Projects">Projects</a>
  <a href="#Resume">Resume</a>
  <a href="#About">About</a>
</div>

score 1 · Answer 2 · answered Jan 20 '21 at 09:22

1

You could use :nth-child selector. Please take a look to this page: https://css-tricks.com/almanac/selectors/n/nth-child/

answered Jan 20 '21 at 09:22

lortschi

2,768
2
18
12

How can I customize certain items inside of a navigation bar in CSS?

2 Answers2