Formatting navbar for personal portfolio

Having some issues with the navbar. I’ve been referencing my notes, other projects, and checking other topics here to see if I can figure out what’s wrong, but no luck.
I was able to figure out how to keep the bar at the top (which wasn’t working before for some reason) but now it’s been reduced to a small box in the upper right corner. I also can’t get the words to stand side by side with each other.

I’m also struggling a bit to figure out how to resize the images so any advice would be greatly appreciated but the navbar is the main issue.

OK, there’s a few things here.

  1. HTML code:
    When styling in CSS use IDs and classes when possible. I notice in your HTML code there is ID id=navbar id=nav-link. Use these ID’s when styling in CSS instead of nav or a. Because, for example, a would target all your anchors in your HTML code, and you don’t want that, you want just the anchors in your navbar.
    Secondly, there is a typo in your second nav-link item … you’ve typed id-=nav-link. Remove the dash.

  2. CSS:
    As I said earlier use ID’s and classes where possible.
    You have used ID id=nav-link in HTML so in CSS you would target it by typing #nav-link NOT .nav-link > a. the ‘dot’ nav-link is when if you had class="nav-link"

a and .nav-link > a and .nav-link is the same because .nav-link is the class of the a. It’s best to keep .nav-link. But this is is all irrelevant because you have used ID not class in HTML. So please change and use #nav-link only once. I edited your code.

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: var(--accent);
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
}


#nav-link {
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
  
}
  1. Image resize: you can target the images by using your delcared class: .projects-image{ height: 300px; } as an example or width: 500px;
    Please Google around or see W3schools website on how to resize images… there are plenty of ways. Simple google search e.g. resize image css w3school will do.

Hope that helps

1 Like

You are an absolute lifesaver!!! Thank you so much!!!

1 Like