Having problems formatting a nav bar-CodePudding

I'm creating a nav bar for a website and I'm having problems with the css. I'm trying to space out the words and capitalize the words. The problem is that I can't get the text-transform and word-spacing to show up

any help would be appreciated, thanks!

The css:

    nav {
        max-height: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

    .nav{
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .nav li {
        word-spacing: 10px;
        text-decoration: none;
        text-transform: capitalize;
        list-style-type: none;
    }

the html:

<nav>
    <ul >
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</nav>

CodePudding user response：

First, in your snipet, text-transform: capitalize, seems to be working, if what you want is that only the first letter of each word is capitalized, if on the contrary you want the whole word to be capitalized, you have to use uppercase instead of capitalize. If you don't see them working on your page I recommend that you inspect the element with the browser's inspector, and check if there is some other css rule that might be overwriting your text-transform.

Second, word-spacing works when the text is in a single html tag:

In your case it would look something like this:

<li>link link link link link</li>.

However this does not work for navigation because it is a single tag.

Using flex as in your case and having several <li> inside nav, you have to use another strategy to separate the elements.

On the one hand you can add to each li a margin or a padding, and to the last element or to the first element (depending on whether you add the margin to the right or to the left) do not add the margin.

As you are using flex you can also use the property of justify-content: space-between or justify-content: space-evenly and set the total width of the flex container so that they do not exceed the measurements of your page.

Here are a couple of examples:

nav {
        max-height: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

.nav{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav li {
    margin-right: 10px;
    text-decoration: none;
    text-transform: capitalize;
    list-style-type: none;
}

// optional
.nav li:last-child{
    margin-right: 0;
}

<nav>
    <ul >
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</nav>

Second aproach:

nav {
        max-height: 25px;
        height: 25px;
        margin-bottom: 10px;
    }

.nav{
    display: flex;
    width: 300px;
    justify-content: space-evenly;
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav li {
    text-decoration: none;
    text-transform: uppercase;
    list-style-type: none;
}

<ul >
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>

CodePudding user response：

You can approach it this way as well. text-transform is uppercase you can either use gap, padding, margin or width on your spacing between it. see sample below, PLay with this code. Hope this helps

nav {
        max-height: 25px;
        height: 25px;
        margin-bottom: 10px;
       

    }

.nav-wrapper { 
  display: flex; 
  text-align:center;
  max-width: 1440px;
  justify-content: space-evenly;
  }
  
 ul.nav{
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 5px;
        margin-top: 5px;
        text-align: center;
        gap: 20px;
    }

.nav li {
        word-spacing: 10px;
        text-decoration: none;
        text-transform: uppercase;
        list-style-type: none;
        width: 100px;
     
    }
    
 ul li:hover {
    border-bottom: 2px solid green;
    font-weight: bold;
     
   }

<nav>
<div >
    <ul >
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
    </div>
</nav>

CodePudding user response：

Try using padding instead of word-spacing. Also, text-decoration: capitalize; only capitalizes the first letter of each word. Use text-decoration: uppercase; instead. Like this:

nav {
    max-height: 25px;
    height: 25px;
    margin-bottom: 10px;
}

.nav{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 5px;
}

li {
    padding: 1em;
    text-decoration: none;
    text-transform: uppercase;
    list-style-type: none;
}

<nav>
    <ul >
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</nav>