Question 108450 in CSS Question posted in
Some basic documentation can be found here.

Css – Horizontal Nav Bar with logos

I am struggling with the following, could you please help?

I want the logos to be aligned next to each other to the left and the links aligned next to each other to the :

[Logo1] [Logo2] [Logo3] (spaceeeeeeeeeeeeeeeeeeee) [Link1] [Link2] [Link3] 
nav{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav .logo{
    width: 40px;
}

nav ul li{
    list-style: none;
    display: inline-block;
    margin-left: 40px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}


            <nav>
                <img src="images/Logo1.svg" class="logo">
                <img src="images/Logo2.svg" class="logo">
                <img src="images/Logo3.svg" class="logo">
                <ul>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                </ul>
            </nav>

I tried changing attributes under nav .logo but was not successfull (e.g. dispay and position)

Tags:

2

Answers


  1. 0

    I think the code snippet I have attached below should work. I did change your code up a bit (changes not related to the solution) to include a placeholder image and make the link colors black so you could see how everything looks.

    First, I grouped your logos and your links into two separate divs. Since your nav has the properties display: flex and justify-content: space-between, it was causing all of your elements in nav to be evenly distributed in the line. By grouping the logos and links into two separate divs, the property evenly distributed the two groups instead of every element.

    Next, I changed your margin-left property in nav ul li from 40px to 10px. This change helps make the spacing between your links much smaller. To simulate the same spacing for your logos, I added the property margin-right: 10px to the nav .logo selector. Hopefully this helps!

    nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .logo {
  width: 40px;
  margin-right: 10px;
}

nav ul li {
  list-style: none;
  margin-left: 10px;
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-size: 17px;
}
    <nav>
  <div class="logos">
    <img src="https://placeholder.pics/svg/300/DEDEDE/555555/Logo%201" class="logo">
    <img src="https://placeholder.pics/svg/300/DEDEDE/555555/Logo%202" class="logo">
    <img src="https://placeholder.pics/svg/300/DEDEDE/555555/Logo%203" class="logo">
  </div>

  <div class="links">
    <ul>
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </div>
</nav>
    Login or Signup to reply.
  2. 0 
    .container{
  max-width: 1220px;
  padding: 0 10px;
  margin: 0 auto;
}

.menu{
  display: flex;
  justify-content: space-between;
  background-color: rgba(101, 67, 33, 0.5);
  padding: 5px 5px;
}

.menu__links-list{
  list-style-type: none;
  display: flex;
  gap: 0px 20px;
  font-family: monospace;
  font-size: 14px;
}

.menu__link a{
  text-decoration: none;
}
    <div class="container">
  <nav class="menu">
    <div class="menu__logos">
      <img class="menu__logo" src="http://dummyimage.com/40" alt="">
      <img class="menu__logo" src="http://dummyimage.com/40" alt="">
      <img class="menu__logo" src="http://dummyimage.com/40" alt="">
    </div>
    <div class="menu__links">
      <ul class="menu__links-list">
        <li class="menu__link"><a href="#">Lorem ipsum</a></li>
        <li class="menu__link"><a href="#">Lorem ipsum</a></li>
        <li class="menu__link"><a href="#">Lorem ipsum</a></li>
      </ul>
    </div>
  </nav>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search