How to create a separated menu with logo in between

Question

EDIT: Fiddle here: https://jsfiddle.net/tp27e67L/

I'm trying to create a menu from a mockup design, I originally drew it with 3 menu items on each side of the logo but I'm having real troubles with executing this idea with css.

This menu is created via wordpress so I can't customize the html without using custom scripts (which I had to do to get the logo to show up where it does). The menu must be a single menu, so I can't split it up into 2 menus and just putting the logo in between etc.

I tried using display table, table-row and table-cell but it's not even close to what I'm trying to achieve.

This is how it should look like:

This is how my (somewhat incomplete) attempt looks like:

Here's my attempt:

<div id="desktop-nav">
  <ul id="desktop-nav-menu" class="clearfix no-bullet">
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Hem</li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Aktiviteter</li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">Konferenser</li>
    <li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">Priser</li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">Om oss</li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">Kontakta oss</li>
  </ul>          
</div>

#desktop-nav {
  display: table;
  width: 100%;
}

#desktop-nav-menu {
  display: table-row;
}
#desktop-nav-menu .menu-item {
  display: table-cell;
  text-align: center;
}

.site-logo {
  min-width: 400px;
}
.site-logo > img {
  width: 400px;
  height: 146px;
  margin: -6px auto 0;
}

The logo is and must be at most 400px wide but can scale as you resize down.

I'm struggling with making the logo appear in the middle, as well as making the .menu-items take up as much space as possible, while getting it to look the desired way. If possible I would like to avoid having fixed widths for the .menu-item since the text might become longer or shorter.

It just feels like doing it the way I'm trying to do it is a bit clunky altogether so I would appreciate some assistance.

Answer 1

As far as I understand your question, the logo is not an actual menu element but part of the styling. Based on this assumption you should remove the line

<li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>

altogether as it is usually better to preserve the semantic integrity of the html code.

Instead set the logo as a background image on the menu. Then you can space out the menu elements by using css selectors.

#desktop-nav-menu {
    background: url(logo.png) no-repeat 100px 0
}

#desktop-nav-menu .menu-item {
    position: relative;
    left: 100px;
}

#desktop-nav-menu .menu-item:nth-child(1),
#desktop-nav-menu .menu-item:nth-child(2),
#desktop-nav-menu .menu-item:nth-child(3) {
    left: 0px;
}

The drawback is that this will only work on one line.

Answer 2

Don't use display table, table-row and table-cell

Use float instead. It makes design much more flexible. DEMO

Added borders for your reference.

see if this works for you.

#desktop-nav {
  display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    text-align:center;
  border:1px solid red;
  overflow:hidden;
}

#desktop-nav-menu {
  display: inline-block;
  border:1px solid green;
  padding:0px;
}
#desktop-nav-menu .menu-item {
  float:left;
  width:auto;
  text-align: center;
  list-style:none;
  height: 146px;
   line-height: 146px;
  border:1px solid blue;
}

.site-logo {min-width:400px;
  height: 146px;
  border:1px solid red !important;
}
.site-logo > img {
  width: 400px;

  border:1px solid red ;
}

Answer 3

Is this what you're looking for?

<div id="desktop-nav">
  <ul id="desktop-nav-menu" class="clearfix no-bullet">
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Hem</li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Aktiviteter</li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">Konferenser</li>
    <li id="menu-item-31" class="site-logo menu-item menu-item-type-custom menu-item-object-custom menu-item-31"></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">Priser</li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">Om oss</li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">Kontakta oss</li>
  </ul>          
</div>
<style>
#desktop-nav {
  display: table;
	position: absolute;
	top: 0;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0);
	text-align:center;
}

#desktop-nav-menu {
  display: table-row;
}
#desktop-nav-menu .menu-item {
  display: table-cell;
  text-align: center;
}

.site-logo {min-width:400px;
}
.site-logo > img {
  width: 400px;
  height: 146px;
  margin: -6px auto 0;
}
</style>

I removed width:100%; from #desktop-nav and replaced it with:

position: absolute;
top: 0;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0);
text-align:center;

Answer 4

First, you want to vertical-align the menu items. You almost got it, because you already display them as table-cells. But then you float them. Remove that and add a vertical-align: middle

#desktop-nav-menu .menu-item {
  display: table-cell;
  /*float: left;*/
  vertical-align: middle;
  text-align: center;
}

You'll also see that the menu will be as width as the screen. You might want to make it smaller, add a width to #desktop-nav and add a margin: 0 auto to center it on the page:

#desktop-nav {
  width: 850px;
  margin: 0 auto;
  max-height: 140px;
}

Updated Fiddle