# I cant seem to get hold of my nav, please help : (

**URL:** <https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197>\
**Category:** General\
**Created:** [July 22, 2020, 5:11pm UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197 "2020-07-22T17:11:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Demilade\_OG](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/demilade_og/32/140391_2.png) [@Demilade\_OG](https://forum.freecodecamp.org/u/Demilade_OG)\
**Post date:** [July 22, 2020, 5:11pm UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/1 "2020-07-22T17:11:41Z")

</div>

I want to put the nav on the right hand side of my header but can’t seem to, i can’t even change the colour. Please help.

```auto
<html>
<head>
<meta charset="utf-8">
<style>
body {
    background-color:rgb(58, 8, 8);
    color: white;
    margin-left: 50px;
    margin-right: 50px;
    

}
img {
    border: 3px solid rgb(109, 94, 11);
    border-radius: 50%;
}
#welcome {
    letter-spacing: 3px;
    font-family: sans-serif;
    font-style: italic;
    font-weight: bold;
}
#nav-bar {
    color: white;
    grid-row: 1 / 2;
    grid-column: 4 / 6;
    text-align: right;
}
#layout {
    display: grid;
    grid-template-rows: 8em 500px 100px 500px 100px 100px;
    grid-template-columns: 1fr 50px 500px 50px 500px;
    margin-left: 40px;
}

#header {
    text-align:center;
    font-family: ubuntu,'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 300%;
    
    font-weight: lighter;
    grid-row: 1 / 2;
    grid-column: 1 / 6;
    text-align: left;
}
h1 {
    font-size: 100%;
    font-weight: lighter;
    letter-spacing: 4px;
    margin-right: auto;
}

#number14 {
    grid-area: 2 / 3 / 3 / 4;
}
#number13 {
    grid-area: 2 / 5 / 3 / 6;

}
#number10 {
    grid-area: 4 / 3 / 5 / 4;
}
#number7 {
    grid-area: 4 / 5 / 5 / 6;
}
#price14 {
    grid-area: 3 / 3 / 4 / 4;
    margin: auto;
    font-size: 300%;
    color:rgb(109, 94, 11);
    border:rgb(109, 94, 11) solid 4px;
    background-color: white;
}
#price13 {
    grid-area: 3 / 5 / 4 / 6;
 margin: auto;
    font-size: 300%;
    color:rgb(109, 94, 11);
    border:rgb(109, 94, 11) solid 4px;
    background-color: white;
}
#price10 {
    grid-area: 5 / 3 / 6 / 4;
    margin: auto;
    font-size: 300%;
    color:rgb(109, 94, 11);
    border:rgb(109, 94, 11) solid 4px;
    background-color: white;
}
#price7{
    grid-area: 5 / 5 / 6 / 6;
 margin: auto;
    font-size: 300%;
    color:rgb(109, 94, 11);
    border:rgb(109, 94, 11) solid 4px;
    background-color: white;
}
#header-img {
    height: 50px;
    width: 50px;
}
</style>
</head>
<body>
    <div id="layout">
        
        <header id="header">
        <h1> <img src="Annotation 2020-07-22 163220.png" alt="logo" id="header-img"> Rilli Chocolate Factory</h1>
        <nav id="nav-bar"> <a href="">Pricing</a> </li>
          <a href="">Contact</a> </li> </nav>
          </header>    
        <p id="welcome">Here to serve...</p>

    
        
            <figure id="number14"><img src="https://www.dropbox.com/pri/get/images%20%287%29.jpeg?_subject_uid=3374006496&w=AAAQx8zd8kFSIriSFHhpdPbIjt2EQqjYoDHcVDMgB4nDig" alt="" width="400px" height="400px" style="margin-top: 5em;"></figure>  
            <figure id="number13"><img src="https://www.dropbox.com/pri/get/images%20%2814%29.jpeg?_subject_uid=3374006496&w=AAAcsDmIJCVxtFiZ8_CFTdiuMP_21m5aBgtvVEg0x3T1EA" alt="" width="400px" height="400px" style="margin-right: 50px; margin-top: 5em;"></figure>  
            <figure id="number10"><img src="https://www.dropbox.com/pri/get/images%20%2810%29.jpeg?_subject_uid=3374006496&w=AAC48gaFwmlF94EuSpLSfF1ilN08Ir9hNccFNAlbmP78ig" alt="" width="400px" height="400px" style="margin-top: 5em;"></figure>
            <figure id="number7"><img src="https://www.dropbox.com/pri/get/images%20%2813%29.jpeg?_subject_uid=3374006496&w=AAAmsM8naVsjxdiIqxbDQkCDU1cF8VX-xbQynpJov-g5Gw" alt="" width="400px" height="400px" style="margin-right: 50px; margin-top: 5em;"></figure>
        

        <p id="description"> </p>

        <figure id="price14">$69</figure>
        <figure id="price13">$45</figure>
        <figure id="price10">$87</figure>
        <figure id="price7">$50</figure>
        
        

    
</div>
</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![samolex](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/samolex/32/166737_2.png) [@samolex](https://forum.freecodecamp.org/u/samolex)\
**Post date:** [July 22, 2020, 5:24pm UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/2 "2020-07-22T17:24:31Z")

</div>

> [@Demilade\_OG](#):
>
> i can’t even change the colour

looks like you want to change the link color and not text color. If so use:

```auto
#nav-bar a {
	color: green;
}

```

---

<div class="post-metadata">

**Author:** ![Demilade\_OG](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/demilade_og/32/140391_2.png) [@Demilade\_OG](https://forum.freecodecamp.org/u/Demilade_OG)\
**Post date:** [July 22, 2020, 10:59pm UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/3 "2020-07-22T22:59:41Z")

</div>

Yeah, that changed the color thanks. But i still can’t move the whole nav to the top right corner of the web page.

---

<div class="post-metadata">

**Author:** ![samolex](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/samolex/32/166737_2.png) [@samolex](https://forum.freecodecamp.org/u/samolex)\
**Post date:** [July 23, 2020, 7:46am UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/4 "2020-07-23T07:46:50Z")

</div>

You are using a grid display for your nav bar… it’s probably easier and common to use flex display on navs. Not that it won’t work, but flex saves you extra code. Plus the way you have defined your grid templates you will always get a scroll bar on smaller screens unless you fix it with media queries - more codes.

I don’t really get what you meant by putting it on the right side… i have different thoughts- maybe you want to push the items to the right side or… If this is that is what you want i suggest you use a flex display on the navbar. With 2 lines of CSS you get it that way…

---

<div class="post-metadata">

**Author:** ![Demilade\_OG](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/demilade_og/32/140391_2.png) [@Demilade\_OG](https://forum.freecodecamp.org/u/Demilade_OG)\
**Post date:** [July 23, 2020, 10:27am UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/5 "2020-07-23T10:27:07Z")

</div>

I have used flex this time but somehow margin-right auto won’t just shift the others away.

```auto
<html>
<meta charset="utf-8">
<head>
<style>
   body {
       background-color: rgb(87, 38, 4);
       color: white;

   }
   li.logo {
       margin-right: auto;
   }
   
   nav ul {
       margin: 0;
        padding: 0;
        list-style-type: none;
        align-items: center;
        display: flex;
       background-color: black;
       flex-direction: row;
       flex-wrap: wrap;
       
   }
   nav ul li a {
       display: block;
        border: 1px solid;
        border-radius: .5em;
        padding: .5em 1em;
        margin: .5em;
        color: white;
        background-color: black;   
   }
   #nav-bar {
       background-color: white;
   }
   
  

</style>
<title> Product Landing Page For Rilli Factory </title>
</head>
<body>
<main>
<header id="header">
   
   <nav id="nav-bar"> 
       <ul>
       <li><img src="LOGO.png" alt="logo" class="logo"></li>
       <li><a href="" >Menu</a></li>
       <li><a href="" >Contact</a></li>
       <li><a href="" >About</a></li>
   
       </ul>
       </nav>
</header>

</main>

</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![Demilade\_OG](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/demilade_og/32/140391_2.png) [@Demilade\_OG](https://forum.freecodecamp.org/u/Demilade_OG)\
**Post date:** [July 23, 2020, 10:34am UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/6 "2020-07-23T10:34:36Z")

</div>

Yes, i want to shift the other items away from the logo.

---

<div class="post-metadata">

**Author:** ![samolex](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/samolex/32/166737_2.png) [@samolex](https://forum.freecodecamp.org/u/samolex)\
**Post date:** [July 23, 2020, 10:51am UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/7 "2020-07-23T10:51:45Z")

</div>

You gave the `img` .logo instead of the `li` - that’s why.

---

<div class="post-metadata">

**Author:** ![Demilade\_OG](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/demilade_og/32/140391_2.png) [@Demilade\_OG](https://forum.freecodecamp.org/u/Demilade_OG)\
**Post date:** [July 23, 2020, 11:38am UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/8 "2020-07-23T11:38:56Z")

</div>

wow, thanks! this thing has had me moody for like 24hours now, thanks a lot!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:45pm UTC](https://forum.freecodecamp.org/t/i-cant-seem-to-get-hold-of-my-nav-please-help/411197/9 "2021-06-01T18:45:38Z")

</div>

Closed on June 1, 2021, 6:45pm UTC


