Question 309018 in Html Question posted in
Some basic documentation can be found here.

Html – Header with a logo and a nav bar items in one line

I am currently studying Code Academy – Front End Developer course and next to it, I am trying to create my website.. I am really trying as this is my first time doing such thing. And I am already feeling lost and stupid.
I got stuck on my header already!
I have my header where I want to place my logo (on the left side) and next to it, I want my nav bar to appear (not right next to it, I want the nav bar to be more less in the centre of the page)
here is how it looks like now: here is how it looks like now

How can I do that? Also, I would love if you could explain why it should be done the way it should be, so I don’t just copy paste the code but actually learn something. Thank you millions for your help!

<!--THIS IS MY HEADER-->
        <div>
            <header class="header">
                <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
                <nav class="navbar">
                    <ul>
                        <li>ABOUT ME</li>
                        <li>MY WORK</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
            
        </div>

CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
  }

.logo {
    width: 188px;
    height: 90px;
}
.navbar{
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
Tags:

3

Answers


  1. 0 
    *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;  
   display: flex;
   justify-content: space-between; 
   align-items: center;
   padding: 10px;
}

.logo {
    width: 188px;
    height: 90px;
}
.navbar {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
 
.navbar ul {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.navbar ul li {
    list-style-type: none;
    display:inline;
    margin-right:10px;
}
    <!--THIS IS MY HEADER-->
<div>
  <header class="header">
    <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
      <nav class="navbar">
        <ul>
          <li>ABOUT ME</li>
          <li>MY WORK</li>
          <li>CONTACT</li>
        </ul>
      </nav>
    </header>
</div>
    Login or Signup to reply.
  2. 0

    To create a header with a logo on the left and a centered navigation bar, you can utilize CSS Flexbox for layout control. In the header’s CSS, set display: flex to establish a flex container. Use justify-content: space-between to push the logo to the left and the navigation bar to the right, creating space between them. Adding align-items: center vertically centers the items within the header. For the navigation bar, apply display: flex for its layout, justify-content: space-evenly for even spacing, and adjust margin on its list items for desired spacing. This combination of flex properties provides a clean and responsive layout for your header, ensuring the logo is on the left, and the navigation bar is centered on the page. Adjust values as needed for your specific design preferences.

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    background-color: white;
    border-bottom: solid;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Align items to the start and end of the header */
    align-items: center; /* Center items vertically */
    padding: 10px; /* Add padding for spacing */
}

.logo {
    width: 188px;
    height: 90px;
}

.navbar {
    list-style-type: none;
    display: flex;
}

.navbar ul {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.navbar li {
    margin: 0 15px; /* Adjust spacing between navigation items */
}

    <div>
    <header class="header">
        <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
        <nav class="navbar">
            <ul>
                <li>ABOUT ME</li>
                <li>MY WORK</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>
</div>
    Login or Signup to reply.
  3. 0

    Also, I would love if you could explain why it should be done the way it should be, so I don’t just copy paste the code but actually learn something.

    HTML5 brought clearer semantics which basically just means that there are now lots of elements to use that match their meaning. Having a <header> for your heading top-bar and a <nav> for your main navigation are good examples of ones you’ve already adopted.

    My suggestion would be to use <a> tags within that <nav> because semantically that is what you are trying to do, link the user to another page. In the snippet below that is what I have done. These work seamlessly within a <nav> which means also you don’t have to use a <ul>. You still can of course, and nothing wrong with it, but unless you have a good reason to use one then you can just omit it.

    By styling the <header> as display:flex you can have the <img> and <nav> sit horizontally beside each other with the default flex-direction: row; style. The <img> will take up it’s space with the height/width styles and then with the <nav> style of flex: 1; you are telling the browser that the <nav> should take up the rest of the available space of that <header>. This means you can then center the links inside the <nav>.

    With images it’s good set the height or width and then set the other option to auto so that the image stays in proportion to it’s ratio, otherwise your image can look stretched by hard-coding both values.

    I have added some comments to the styles as you seem keen to actually learn.

    <!DOCTYPE html>
  <html lang="en">
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
           *{
              margin: 0;
              padding: 0;
           }
           header{
              display: flex;
              flex-direction: row; /* This is default so you can omit it but it's good to be explicit  */
              justify-content: flex-start; /* This will snap all content of header to the left due to 'flex-direction: row'  */
              background-color: white;
              border-bottom: solid;
              padding: 0.5rem 1rem; /* Padding top/bottom then left/right. 1rem = default pixel size of html font (14px or 16px etc) so 0.5rem = 7px or 8px  */
            }
           header > img{
              height: 90px; /* Set the height of your image  */
              width: auto; /* Keep the height/width ratio of source image  */
           }
           nav{
              display: flex;
              flex-direction: row;
              flex: 1; /* Use the rest of the available space of the <header> */
              justify-content: center; /* Keep the links in the center of this element  */
              align-items: center; /* Puts the links vertically in the center of the <nav> */
           }
           nav a{
              padding: 1rem;
              text-decoration: none; /* Take away the default link styling  */
              color: black;
              border-bottom: 2px solid transparent;
           }
           nav  a:hover{
              border-bottom: 2px solid black;
              transition: border-bottom 0.4s ease-in;
           }
        </style>
     </head>
     <body>
        <header class="header">
           <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="My Image">
           <nav class="navbar">
              <a href="./about.html">ABOUT ME</a>
              <a href="./work.html">MY WORK</a>
              <a href="./contact.html">CONTACT</a>
           </nav>
        </header>
     </body>
  </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search