Menu splitsen in wordpress, logo middenin.

[nessler]

Hoi allen !

Vele tutorials ten spijt, blijf ik maar struikelen over het volgende probleem.

Voor mijn wordpress website gebruik ik een een menu, opgesteld met wordpress menu zelf.
Ik wil graag het logo, 100 px breed, in het midden hebben, met links en rechts gelijke marges naar het vorige en volgende menu item.

Ik heb al pogingen gedaan met DIV, li:child, twee losse menuutjes maar het resultaat dat ik nu heb komt het dichtste in de buurt.
Echter is dit nog steeds niet zoals het hoort.
Zo zou het er moeten uitzien.

Policy *** About *** LOGO *** Contact *** AZ *** Search.

Echter kom ik niet veel verder dan het onderstaande, zoals het er nu bijstaat.

Policy *** About *** LOGO *** Contact ***** AZ ******** Search.

Het search veld wordt opgeroepen via een php en een form in een div.

Het gekke is dat ik gelijke marges op de twee elementen About (margin-right) en contact(margin-left) heb geplaatst,
maar deze toch net niet juist staan. Ik weet het, het zijn details, maar ik wil het graag correct en netjes hebben.

Info of tips hoe het beter aan te pakken zijn zeer welkom.

De site is hier te vinden www.hellodolly.be


De Header code die in het header.php bestand steekt van wordpress ziet er zo uit:

<div onclick="window.location='http://www.hellodolly.be'" style="cursor:pointer;" class="logo"></div>
	</header><!-- #masthead .site-header -->

<div id="main" class="site-main">




<div id="navmenu">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>


<div class="search-form">
	<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
	<div><label class="screen-reader-text" for="s"></label>
        <input type="searchtext" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text"/>
        <input type="submit" id="searchsubmit" value="Search" />
	</div>
</form>
</div>
</div>

Dit geeft als uiteindelijk resultaat op de pagina zelf dit:

<div onclick="window.location='http://www.hellodolly.be'" style="cursor:pointer;" class="logo"></div>
	</header><!-- #masthead .site-header -->

<div id="main" class="site-main">




<div id="navmenu">
<div class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-530"><a href="http://www.hellodolly.be/policy/" class='menu-image-title-'>Policy</a></li>
<li id="menu-item-531" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-531"><a href="http://www.hellodolly.be/about/" class='menu-image-title-'>About</a></li>
<li id="menu-item-532" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-532"><a href="http://www.hellodolly.be/contact/" class='menu-image-title-'>Contact</a></li>
<li id="menu-item-533" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-533"><a href="http://www.hellodolly.be/az/" class='menu-image-title-'>AZ</a></li>
</ul></div>

<div class="search-form">
	<form role="search" method="get" id="searchform" action="http://www.hellodolly.be/">
	<div><label class="screen-reader-text" for="s"></label>
        <input type="searchtext" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text"/>
        <input type="submit" id="searchsubmit" value="Search" />
	</div>
</form>
</div>
</div>

Met de css die over het menu en search formulier gaat:

/* =Menu
----------------------------------------------- */

@font-face {
	font-family: Sugo;
	src: url('http://www.hellodolly.be/fonts/Sugo_ExtraLight.ttf');
	src: url('http://www.hellodolly.be/fonts/Sugo_ExtraLight.eot');
	src: url('http://www.hellodolly.be/fonts/Sugo_ExtraLight.eot?#iefix')
             format('embedded-opentype'),
         url('http://www.hellodolly.be/fonts/Sugo_ExtraLight.woff') format('woff'),
         url('http://www.hellodolly.be/fonts/Sugo_ExtraLight.ttf') format('truetype');
}

#navmenu {
	font-family:'Sugo';
	font-size:31px;
	text-transform: uppercase;
	text-align:center;
	position: relative;
}

#navmenu ul {
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	list-style-image: none; 
}

#navmenu li {
	display: inline-block; 
padding: 0px 15px 0px 15px;
}

li#menu-item-531 {
padding-right: 80px;
}

li#menu-item-532 {
padding-left: 80px;
}

#navmenu a {
	text-decoration: none;
}

#navmenu a:hover{
	background: #ffa83c;
	color: #fff;
}

.logo {
	background: url(http://www.hellodolly.be/wp-content/themes/snaps/images/hd%20100px.png) no-repeat;
	background-size: 100px 100px;
	width: 100px;
	height: 100px;
	margin-top:50px;
	position: absolute;
	left:50%;
	margin-left:-50px;
}

div.feature {
    position: relative;
}
 
div.feature a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

/* =Search Box
----------------------------------------------- */

input#s{
	width:200px;
}

input#searchsubmit {
	color:#444444;
}

.search-form {
	text-transform: uppercase;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}

 

[damnsharp]

Hoi nessler,
Ja lastig. Volgens mij is het probleem vooral omdat de menu items verschillende breedtes hebben. Ik zou wat aanpassen en uitzonderingen maken:

Wat je kan doen is #navmenu ul een margin-right van 4em geven en dan #navmenu li een padding right van 4em en dan van individuele menu items menu-item-531 en menu-item-532 de padding rechts van 80px eraf te halen.

#navmenu ul {
	margin-right: 3.5em;
}

#navmenu li {
	margin-right: 4em;
}

Dan uitzondering voor policy menu:

#menu-item-530 {
    padding-right: 2em !important;
}

Een uitzondering voor contact menu ivm AZ menu wat opschuiven naar links:

#menu-item-531 {
    padding-right: 2em !important;
}

Hoop dat het je wat helpt.
Succes.