Making NavBar with Display: Flex

Question

I'm a beginner. I tried to build a navbar with flex but failed to get the desired result. what I want is

Logo Home About Services Contact

* {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

.nav {
  display: flex;
  background-color: gray;
}

.menu {
  list-style: none;
  display: inline-block;
  padding: 20px
}

a {
  text-decoration: none;
}

.con {
  float: right;
}

<header class="nav">
  <img src="./Logo.png" width="80px" class="logo" alt="">
  <nav>
    <ul>
      <li id="home" class="menu"><a href="">Home</a> </li>
      <li id="about" class="menu"><a href="">About</a> </li>
      <li id="services" class="menu"><a href="">Services</a> </li>
      <li id="contact" class="menu con"><a href="">Contact</a> </li>
    </ul>
  </nav>
</header>

I think this is work for you...Check - https://codepen.io/Mak0619/pen/YzyZdZL — Mak0619, Apr 25 '20 at 07:59

Ferin Patel · Answer 1 · 2020-04-25T08:30:17.513

0

You can use display flex and justify-content property to move items.

.nav
{
  width:100%;
  display:flex;
  justify-content:space-evenly;
  align-items:center
}
.img-wrapper
{
  width:33.33%;
}
.nav-items-center
{
  width:33.33%;
  display:flex;
  justify-content:space-evenly;
  align-items:center;
}
.nav-item-right
{
  width:33.33%;
  display:flex;
  justify-content:space-evenly;
  align-items:center;
}

<header class="nav">
    <div class="img-wrapper">
     <img src="./Logo.png" width="80px" class="logo" alt="Logo">
    </div>
    <ul class="nav-items-center">
      <li id="home" class="menu"><a href="">Home</a> </li>
      <li id="about" class="menu"><a href="">About</a> </li>
      <li id="services" class="menu"><a href="">Services</a> </li>
    </ul>
    <ul class="nav-item-right">
      <li id="contact" class="menu con"><a href="">Contact</a> </li>
    </ul>
</header>

edited Apr 25 '20 at 08:30

answered Apr 25 '20 at 07:16

Ferin Patel

3,424
2
17
49

not getting desired result. – Shahbaz Apr 25 '20 at 07:37
Logo (left corner) Home About Service(Center) Contact(right Corner) – Shahbaz Apr 25 '20 at 07:38
Sorry for inconvenienc. I have updated the code. please check out – Ferin Patel Apr 25 '20 at 08:30

score 0 · Accepted Answer · answered Apr 25 '20 at 07:52

* {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

.header {
  display: flex;
  background-color: gray;
  width: 100%;
}

nav {
  width: 100%;
}

ul {
  display: flex;
  justify-content: space-between;
}

.menu {
  list-style: none;
  display: inline-block;
  padding: 20px
}

a {
  text-decoration: none;
}

.con {
  float: right;
}

<header class="header">  
  <nav>    
    <ul>
      <img src="./Logo.png" width="80px" class="logo" alt="">
      <div>
        <li id="home" class="menu"><a href="">Home</a> </li>
        <li id="about" class="menu"><a href="">About</a> </li>
        <li id="services" class="menu"><a href="">Services</a> </li>
      </div>
      <li id="contact" class="menu con"><a href="">Contact</a> </li>
    </ul>
  </nav>
</header>

I believe this is what you are looking for

@Shahbaz. You are welcome. please upvote if this was helpful for you — Sen Alexandru, Apr 25 '20 at 08:15

Making NavBar with Display: Flex

2 Answers2