6

can anybody guide me to the best way to create a navigation bar with a centered logo and 2 links in each side just like this:

enter image description here

Ive read about different ways like splitting a ul into 2 and floating one left and the other right and then centering the logo but im not sure how to do that and the more I read the more I got confused. I am looking for it to be responsive and for it to be taller than normal, maybe 15/20% of the screen height.

Can anybody help me on how to go about this?

Dunne08
  • 143
  • 2
  • 2
  • 10

2 Answers2

6

Simply use Flexbox. Just replace the div #logo with your image.

HTML

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

CSS

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}


html,
body {
  height: 100%;
}
body {
  margin: 0;
}
nav {
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}
#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>
SvenL
  • 1,904
  • 8
  • 10
  • Yes! this works a charm, thanks a lot. Although I am have issues making my logo a link to index.html, it nudges off center when I do so but I can worry about that later. I'm actually using flexbox to create a 4 column grid for a poftfolio of images but I'm getting a margin at the top or bottom of each row, do you know whats going on here? http://codepen.io/anon/pen/RoawLB – Dunne08 Nov 11 '16 at 23:23
  • You're welcome, sry for the late reply. Glad could have helped. If you still have the issue with the logo feel free to post a fiddle so I can have a short look at it if you want. Yeah the problem is that your images probably have a different height. Flexbox won't align it like a masonry gallery. If you want something like this you can have a look at this [pen](http://codepen.io/svelts/pen/ogboNV) I've made earlier. You can also add align-items: center to your flex container but I don't know if this is your desired effect. – SvenL Nov 16 '16 at 14:29
  • 4
    Unfortunately not a usable solution.The logo is only centered if the links either side happen to be exactly the same size... – 00-BBB Feb 13 '20 at 16:01
  • 1
    Agree with @00-BBB, in my case the left and right menu is not balance, and the logo won't be centered. – Darryl RN Oct 26 '20 at 15:19
3

Accepted answer breaks if the links aren't EXACTLY the same size (not likely in the real world, obviously could set a fixed width but fiddly)

If there are the same number of links on either side, this works (as long as there is enough room either side for the links to have an even width)

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}
<nav class="navi">
    <ul class="navi-list">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</nav>

If an uneven number, you can add empty invisible elements (yuk I know but it works) either in the DOM or with :before / :after, depending on how many extra elements are needed. This solution is unfortunately not perfect so any suggested improvements would be great. Like this:

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.navi-list:before {
  content: "0";
  opacity: 0.1;
  display: block;
  flex: 1 0 auto;

  
  /*  dev view  */
  height: 20px;
  background: rgba(0,0,0,0.1);
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}
<nav class="navi">
    <ul class="navi-list">
<!--         <li style="opacity:0.1;">empty</li> -->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</nav>
00-BBB
  • 746
  • 7
  • 24