Centered logo in navigation bar

Question

Ok so I have made this naviagtion bar:

HTML: http://pastebin.com/Mgurej6L

CSS: http://pastebin.com/vA7b1dT6

I would like "Unity Code" in the middle of my navigation bar but I've tried but I can't seem to get it to work.

Any help?

Answer 1

well, in order to make your navigation in the center of the page you need to rope your navigation in the div so I add div with class .rope and you style .rope { display: flex; justify-content: center;} like in code below:

/*Css Navigation code*/

.rope {
  display: flex;
  justify-content: center;
}
.unity-code-logo {
  background-size: 100px 59px;
  width: 50px;
  height: 59px;
  position: absolute;
  top: 20px;
  left: 460px;
}
.main-navigation {
  display: inline;
  font-family: ubuntu;
  font-size: 15px;
  font-weight: bold;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation li {
  color: #fff;
  background: #181818;
  display: block;
  float: left;
  margin: 0 2px 0 0;
  padding: 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}
.main-navigation li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.main-navigation li:hover {
  @include transition(background, 0.25s);
  background: #453E3E;
}
.main-navigation ul li ul {
  background: #181818;
  visibility: hidden;
  float: left;
  min-width: 150px;
  position: absolute;
  transition: visibility 0.65s ease-in;
  margin-top: 12px;
  left: 0;
  z-index: 999;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li ul:hover {
  visibility: visible;
}
.main-navigation ul li ul li {
  clear: both;
  padding: 5px 0 5px 18px;
  width: 100%;
}
.main-navigationul li ul li:hover {
  background: #74b7e4;
}
.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
}

<div class="rope">
  <!--Navigation Bar-->
  <nav id="navigation" class="main-navigation" role="navigation">
    <ul class="navigation-menu-main">
      <li><a href="#" class="navigation-menu-main-item">Home</a>
      </li>
      <li><a href="#" class="navigation-menu-main-item">Store</a>
      </li>
      <li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li>
      <li><a href="#" class="navigation-menu-main-item">Projects</a>
        <ul>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

Also div(.rope) by default is 100% width so if you want to give width to rope div you need to add margin: 0 auto;to (.rope) in the style. Just Add <img> in another <li></li> but because you don't have but 3 so is not going to be in the middle it could be right or left otherwise is going to be with the middle <li></li> for the store below the word.

Let me know is that what you need?