Logo center and menu icon on right by using flex

Question

How to achieve logo on center of screen and menu icon and text on right. I have searched it and shown some flex tutorials, but not getting a single way to achieve it.

Please see this image to know how it should look like.

enter image description here

.logo {
background-color: red;
height: 50px;
width: 50px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<nav class="navbar container">
      <div class="logo"></div>
      <div class="navbar-toggle">
        <span>Menu</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
          <path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
          <path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
          </svg>          
      </div>
    </nav>

I want to do this with flex only. Without using extra blank div.

Thanks.

Does this answer your question? https://stackoverflow.com/questions/38948102/right-or-left-align-one-flex-item-while-keeping-the-others-centered — isherwood, Jun 04 '21 at 19:18

Stickers · Accepted Answer · 2021-06-04T19:35:23.993

See comments in the code snippet. Note, added a new div in the HTML.

.navbar {
  display: flex;  /* already in bootstrap */
  border: 1px solid; /* for demo purpose */
}

.navbar:before {
  content: ""; /* create a pseudo element */
  flex: 1; /* grow */
}

.navbar .logo {
  background-color: red;
  height: 50px;
  width: 50px;
  margin: -.5rem 0 -1rem; /* OP asked for offsets */
}

.navbar .menu {
  flex: 1; /* grow */
  display: flex; /* set flexbox */
  align-items: center; /* align vertically */
  justify-content: flex-end; /* push to right */
}

.navbar-toggle {
  background-color: pink;  /* for demo purpose */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<nav class="navbar container">
  <div class="logo"></div>
  <div class="menu"> <!-- this div class menu is NEW -->
    <div class="navbar-toggle">
      <span>Menu</span>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
          <path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
          <path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
      </svg>
    </div>
  </div>
</nav>

Its awesome, can you please adjust that logo like i have in my image? I will accept this as an answer.. — DnD2k21, Jun 04 '21 at 19:30
Your question doesn't ask about negative margins (hint hint), so you shouldn't ask for that in a comment here. — isherwood, Jun 04 '21 at 19:33
@Ente I added example above, bootstrap has padding set on navbar by the way. — Stickers, Jun 04 '21 at 19:38

score 1 · Answer 2 · answered Jun 04 '21 at 19:08

You could try something like this. Here there are two divs overlayed on top of each other which make up the header. Since they're overlayed on top of each other, you'll have to be careful with the behavior on narrow screen sizes.

.header {
  height: 100px;
  width: 100%;
  background: grey;
  display: flex;
  justify-content: flex-end;
}
.absolute-header {
  position: absolute;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.logo-container {
  display: flex;
  flex-direction: row;
}

.logo-img {
  background: blue;
  width: 100px;
  height: 100px;
}

.center-logo {
  background: red;
  width: 150px;
  height: 150px;
}

<div class="absolute-header">
  <div class="center-logo">
  </div>
</div>
<div class="header">
  <div class="logo-container">
    <p>Your Text</p>
    <div class="logo-img">
    </div>
  </div>
</div>

Mohammed Ali · Answer 3 · 2021-06-05T08:37:23.147

1

This is the easiest way to make that done:

.box {
   display: flex;
   justify-content: center;
}
.logo {
   margin-left: auto;
   // You can change the negative value based on the width on the right side's text
   margin-right: -40px;
}
.push {
   margin-left: auto;
}

<div>
  <div class="box">
    <div class="logo">YOUR LOGO</div>
    <div class="push">OTHERS</div>
  </div>
</div>

MY FIDDLE

edited Jun 05 '21 at 08:37

answered Jun 04 '21 at 19:18

Mohammed Ali

140
2
10

1

You can delete your question while you edit if you like, then undelete. – isherwood Jun 04 '21 at 19:32

score 0 · Answer 4 · answered Jun 04 '21 at 18:50

0

Reproducing the image, it would be like this.

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

.header-none {
    flex: 1 auto;
}

.header-logo {
    flex: 1 auto;
    display: flex;
    justify-content: center;
}

.header-text {
    flex: 1 auto;
    display: flex;
    justify-content: flex-end;
}

<header>
  <div class="header-none"></div>

  <div class="header-logo">
      <p>LOGO</p>
  </div>

  <div class="header-text">
      <p>TEXT</p>
  </div>
</header>

answered Jun 04 '21 at 18:50

dududornelees

177
3
13

Can you do something without header-none? Because i cannot include some unwanted code in html.. – DnD2k21 Jun 04 '21 at 18:51
Then it won't be exactly centered. – dududornelees Jun 04 '21 at 18:56
I think i have shown it somewhere with flex... And it was exactly centered... – DnD2k21 Jun 04 '21 at 18:57

Logo center and menu icon on right by using flex

4 Answers4