CODEWITHSUNDEEP
cssmenunavigationnavbarnav
Signe Davidāne
Signe Davidāne

Reputation: 33

Logo on the left and menu links centered

Representation of Navigation layout

Hi. I'm struggling with writing the code for the navigation layout in the picture (above). I want the logo, which is a picture, to be on the left and the menu links in the center. How would that be written in CSS?

This is the HTML for that part:

    <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

Do I maybe need to make some changes in the HTML first?

Thanks in advance!

Upvotes: 3

Views: 3343

Answers (2)

Daniil Loban
Daniil Loban

Reputation: 4381

The main idea is to align everything in the center, but then, pull the logo out of the flow in order to place it to the left. Of course, you need to remember about media-query on a small screen.

Updated:

#header {
  display:flex; 
  justify-content: center; /* center everything */
  align-items: center;
  margin-top: 20px;
  padding: 0 260px; /* prevent crawling on the logo */
}

.img{
  position: absolute; /* remove the logo from the flow */
  left: 20px;   /* move the logo to left */
  height: 48px;
  width: 100px;
}

#nav-bar > ul {
  display:flex; /* make a horizontal menu */
  gap: 20px;    /* gap between menu items */
  list-style: none;
  padding-left: 0px;
}

.img, #nav-bar > ul > li {
  border: 1px solid gray;
  padding: 5px;
}
<header id="header">
    <div class="img">
        <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
    </div>

    <nav id="nav-bar">
        <ul id="menu">
            <li><a class="nav-link" href="#menu1">menu1</a></li>
            <li><a class="nav-link" href="#menu2">menu2</a></li>
            <li><a class="nav-link" href="#menu3">menu3</a></li>   
        </ul>
    </nav>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus earum. Perferendis, neque quasi praesentium tempore at laudantium omnis modi sunt. Tenetur cum dolor magnam praesentium iusto illo, delectus doloribus?</p>

Previous:

#header {
  display:flex;
  justify-content: center;
}

.img{
  position: absolute;
  left: 0; 
}

#nav-bar{
  align-self:center;
}
   <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

Upvotes: 3

Anurag S
Anurag S

Reputation: 145

I believe you can try this for the layout that you want and then modify it further to style your needs. This will give you the layout that you were asking for.

 <header id="header">
  <div class="container-1">
    <a href="landingpage.html"
      ><img
        src="https://picsum.photos/200"
        alt="image of the logo"
        id="header-img"
        width="175px"
        height="52px"
    /></a>
  </div>
  <div class="container-2">
    <ul id="menu">
      <li class="menu-item">
        <a class="nav-link" href="#menu1">menu1</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu2">menu2</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu3">menu3</a>
      </li>
    </ul>
  </div>
</header>

This is the css for the above html

#menu {
     text-decoration: none;
     list-style: none;
     margin: 0;
     padding-inline-start: 0;
    }
 .container-1 {
    display: inline-block;
   }
  .container-2 {
   text-align: center;
   display: inline-block;
   width: calc(100% - 200px);
  }
  .menu-item {
    display: inline-block;
    padding: 1rem;
   }

You can try this and further style the components.

Upvotes: 0

Related Questions