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

1

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.

<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>
2

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

#nav-bar  a {
	color: green;
}
1 Like
3

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

4

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…

5

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

<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>
6

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

7

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

8

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