Personal Portfolio Webpage - Build a Personal Portfolio Webpage Navbar Issue

HTML-CSS
1

Tell us what’s happening:
I have been having issue with the " Your #navbar element should always be at the top of the viewport."
I have tried fixing the position but so far it hasn’t worked …below is the css code…I am perpetually stuck at this point.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css" >

  </head>
  <body>
    <ul id='navbar'>
      <li><a href='#welcome-section'>About</a></li>
      <li><a href='#projects'>Project</a></li>
      <li><a href='#contact'>Contact</a></li>
    </ul>
    <section id='welcome-section'>
      <h1>Hello , I am ....</h1>
      <p>I am learning web developing.</p>
    </section>
    <section id='projects'>
      <div class='project-tile'><a href='project link for survey form'>Survey Form</a></div>
    </section>
    <section id='contact'>
      <a id='profile-link' target='_blank'
         href='Freecodecamp profile link'>FreeCodeCamp Profile
      </a>

    </section>

  </body>

</html>



/* file: styles.css */
body{
  background-image:url(https://wallpapercave.com/wp/wp6026871.jpg)
}
#navbar{
  display:flex;
  background-color:cyan;
  list-style:none;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
li{
  display:flex;
  
}
li a{
  margin-left:80px;
  color:black;
  font-size:20px;
  text-decoration:none;
}
h1{
  background-color:black;
  color:red;
  font-size:50px;
  padding:80px;
  text-align:center;
}
p{
  background-color:black;
  color:red;
  text-align:center;
  padding:20px;
}
#contact{
 background-color:cyan; 
 padding:20 20 20 20;
  margin-bottom:20;
}
#contact a{
  text-decoration:none;
  color:black;
}
#projects{
  background-color:cyan;
  padding:20 20 20 20;
  margin-bottom:20;
}
.project-tile a{
  text-decoration:none;
  color:black;
}
@media{

}

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
2

Thanks for creating a new topic, and I have removed the old one. This article should give you an idea of how to finish this last test

2 Likes
3

Code can be ok for id nav in css can be good if make new div only for navbar and put around code made for list ul move nav id to new div around ul than can make new css writing for ul and can use flex and space for writing put for website links in header try not want give answer but can be some extra code can add and make new div position fixed can also add 0 for right if want hope can help thank you take care gn gm fren other person also put information can help

4

I have tried the above solution but then display of nav isn’t flex anymore and the last test is still not passing.

5

Can you post your new code here. Use the format button that looks like </> and paste your new code between the lines it gives you

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

1 Like
6

can be ok if want remove list and use a elements only for nav div

7

Everything else is same except in html I did :

<header id='header'>
      <nav id='navbar'>
        <ul >
          <li><a href='#welcome-section'>About</a></li>
          <li><a href='#projects'>Project</a></li>
          <li><a href='#contact'>Contact</a></li>
        </ul>
    </nav>
    </header>

And in CSS :

header {
  display:flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right:0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}
1 Like
8

so i should be using only nav or ul not both ?

1 Like
9

Can you show all your current code so I can see all of it, not just the parts of it? I ask because when I make the changes in your last post then the challenge passes for me. So, I want to see how you are doing it all

1 Like
10

tried your code again so can help know can be frustrate sometimes but your code is good and can be almost fix for computer to approve wanted items than only try nave me removed the list items and can make a div with nav id for you and than just use the a elements for your website links than back to your nice css code just try again and use flex also justify content add space between some height and can also add class for your A elements if want make type font size different large small or another color all colors can be same thank you take care gn gm fren

11 
 <div id='navbar'>
      <a class="can be if want change color type size" href='#welcome-section'>About</a>
      <a href='#projects'>Project</a>
      <a href='#contact'>Contact</a>
    </div>

can be good if want add height for nav if want
1 Like
12

can be person put all of code in first question put if start from top of webpage can see code added if make change with the new part of code can pass because have to erase navbar from before and add new header code made now and add new html than code will not be ok even with new css header it will not pass becuase code camp webite needs Id nav to have attributes in css

13

I just added the extra part of header in html and css (in the post above and which the only thing i changed …the rest of code is all same as in original post) , I haven’t saved the code…just run tests on it to make sure it works and it does runs into same problem…what should i do …save the code
this is all changed html code :

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css" >

  </head>
  <body>
    <header id='header'>
      <nav id='navbar'>
        <ul >
          <li><a href='#welcome-section'>About</a></li>
          <li><a href='#projects'>Project</a></li>
          <li><a href='#contact'>Contact</a></li>
        </ul>
    </nav>
    </header>
    <section id='welcome-section'>
      <h1>Hello , I am ....</h1>
      <p>I am learning web developing.</p>
    </section>
    <section id='projects'>
      <div class='project-tile'><a href='link survey form'>Survey Form</a></div>
    </section>
    <section id='contact'>
      <a id='profile-link' target='_blank'
         href='link freecodecamp form'>FreeCodeCamp Profile
      </a>

    </section>

  </body>

</html>

And all changed CSS code:

body{
  background-image:url(https://wallpapercave.com/wp/wp6026871.jpg)
}
header {
  display:flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right:0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}
li{
  display:flex;
  
}
li a{
  margin-left:80px;
  color:black;
  font-size:20px;
  text-decoration:none;
}
h1{
  background-color:black;
  color:red;
  font-size:50px;
  padding:80px;
  text-align:center;
}
p{
  background-color:black;
  color:red;
  text-align:center;
  padding:20px;
}
#contact{
 background-color:cyan; 
 padding:20 20 20 20;
  margin-bottom:20;
}
#contact a{
  text-decoration:none;
  color:black;
}
#projects{
  background-color:cyan;
  padding:20 20 20 20;
  margin-bottom:20;
}
.project-tile a{
  text-decoration:none;
  color:black;
}
@media{

}
14

Thank you…this worked for me but i can’t understand why nav or li didn’t work and div worked ?

15

can be welcome glad can get help in message text
nav can also work here can change the div me put for you to nav instead
li can be used somewhere else but the question wanted flex display added for nav that is why had to change it remember if keep Nav plus UL LI had to use flex for UL to make navbar accross top of screen if added only flex for Nav and keeping UL LI the Nav flex would not put the UL LI accross screen unless had 2 3 4 extra UL LI’s that can be same as you have A elements now for it to put accross screen the way before was just Nav UL LI and putting display flex would do nothing to UL becuase can be only one hope can understand thank you take care gn gm fren

1 Like
16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.