Please help me to see to improve my Personal Portfolio Webpage

HTML-CSS
1

Hello guys,
So this is my last projects to complete, I’m pretty excited about it. It’s not yet a complete webpage, because I just start on it. I’m working on my header with logo and navbar on top. usually, I give the #header fixed position to make it sticks on top. however, it didn’t fill the story line. I figured I should have put the fixed position to the navbar directly to make it pass.

However, there’s a little problem on that, when I make the screen smaller, it make the logo exceed the navbar and that’s when the navbar start to collapse. here’s the screenshot on it:
The process of how the logo intouch with navbar
image
image
image

I would prefer the navbar to collapse before the logo exceed the navbar. any Idea how to do that?

here’s my HTML code:

/* 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 Webpage</title>
  <link rel="stylesheet" href="./styles.css"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"/>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
</head>
<body>
  <main>
    <header id="header">
      <img 
        src="https://static.vecteezy.com/system/resources/previews/001/203/321/non_2x/wings-tattoo-png.png" 
        alt="logo" 
        id="logo"/>
      <nav id="navbar">
        <ul>
          <li><a href="#welcome-section">About</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section id="welcome-section">
      <h1>Hey I am Habushu</h1>
      <p><i>a web developer</i></p>
    </section>
    <section id="projects"></section>
    <section id="contact"></section>
  </main>
  <footer></footer>
</body>
</html>

Here’s my CSS

/* file: styles.css */
*{
box-sizing: border-box;
}

body{
margin:0;
padding:0;
font-family: lato, sans-serif;
}

header{
background-color: #eeeeee;
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
position:fixed;
align-items: center;
font-size: 15px;

}

#logo{
width:100px;
margin-left: 10px;
}

#navbar{
position: fixed;
right: 10px;
}

#navbar li{
list-style:none;
display: inline;
text-transform: uppercase;
text-align: center;
}


li > a{
text-decoration:none;
color: black;
font-weight: bold;
padding: 18px 10px 18px 10px;
}

#navbar a:hover {
background-color: black;
color: white;
}

Looking forward for your reply soon! :slight_smile:

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Another question would be: is it possible to arrange the navbar and logo in such way that when the logo is in touch with the navbar it wont collapse?

3

Generally speaking this is a problem that you solve with a @media query. You can set a min or max width under which the rules in the query become effective.

So, if you want the elements in the navbar to disappear when the screen is at 400 px, you might do something like this:

@media (min-width: 400px) {
  #navbar li {
    display: none;
  }
}

This will hide the 3 link elements when the screen is 400px or less. You may need a different breakpoint for you specific layout.

At the same time, if you want to display something, you could put another rule in that same media query:

@media (min-width: 400px) {
  #navbar .someElement {
    display: block;  /*  This might be a clickable "hamburger menu" */
  }
}

Keep in mind that your @media queries should be AFTER any existing CSS information and should use identical selectors if there are other rules targeting those elements. The rule being later in the file means it will take priority when active.

1 Like
5

Hey there,
thanks for replying, I did hide the logo in the small screen because to look at it while it overlaps isn’t great. but it wasn’t the best solution as I would like to have both the logo and navbar to be displayed in small screen but WITHOUT its to overlap.

I tried to make a media query for both logo and navbar to display as block as you advice but the result is they still are overlapping.

do you have a suggestion to make the logo and navbar wont be overlapping?

Thank you

6

You can’t fit 10 pounds of cheese in a 5 pound bag. If things are too wide, they’re too wide.

The only thing I could think of is maybe making the font smaller at lower resolutions? You can use a @media query to change when the font gets smaller.

Really, though, the most common pattern is to change to a dropdown menu. At lower resolutions you would hide your nav and show the menu icon.

Here are a bunch of examples of CSS only Hamburger Menus:

Here is one which uses a little bit of Javascript to handle the toggle:

If you search more you might be able to find something that meets your needs.

1 Like
7

hey Habushu,

Good job checking for a smaller screen! A common way I solve this is to use media queries as SaintPeter mentioned, but specifically I’ll play around with the sizing in the dev console until the breakpoint where it starts looking bad in the current layout, and change the flex-direction to column. That way after a certain point (if you’re going from large screen to small screen), you’ll just list the nav items vertically. I didn’t try this with your code, but this has worked with my own website. Try playing around with that!

1 Like
8

Thank you so much for your feedback! :blush: I’ll definitely check out the hamburgers menu. much appreciated!

9

Hey Hideaki, Thanks for the advices, I’ve tried the column flex direction on smaller screen on the other project and you’re right, it works perfectly. in this project I want to try something different, and thats why i bumped into these problem :melting_face:

10

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