How to add a custom item to a specific WordPress menu item position -


i have primary menu registered , displayed consists of 4 links (home, about, news, blog). want add html (a logo) in between second , third menu , wondering if possible.

here diagram: home | | logo | news | blog

i looking @ hook wp_nav_menu_items can add custom item either first position or last.

before used jquery add html since dom has loaded logo loads last , i'm trying logo show first or @ same time content of page.

php version

one way create 2 navigation menu's used.

header_menu_1 | logo | header_menu_2

within back-end, you'd need create new header location , add 2 menu items it.

then within header.php file, have code.

<?php     $args1 = array( 'menu' => 'header_menu_1' );     $args2 = array( 'menu' => 'header_menu_2' );     wp_nav_menu($args1); ?>  <img src="logo source" />  <?php     wp_nav_menu($args2); ?>

that easiest way without using jquery or messing plugins.

wp nav menu

adding new wordpress menus

jquery version

$(document).ready(function() {     var = 1;     $('ul li').each(function() {         if(i == 2) {             $(this).after('<img src="http://www.socialtalent.co/images/blog-content/so-logo.png" width="250" />');         }         i++;     }); });

demo

css version

this dirty hack way of doing it.

using nth-child, select out 2nd , 3rd elements. both items more margin middle 2nd element 30px margin right , 3rd element 30px margin left.

then put div logo in position absolutely in middle.

example:

css:

#container {     width: 100%; }  ul {     display: block;     width: 100%; } li {     display: inline-block;     width: 15%;     padding: 1.25%;     margin: 1.25%;     background: blue; }  li:nth-child(2) {     margin-right:10%; } li:nth-child(3) {     margin-left: 10%; }  #container img {     width: 20%;     position: absolute;     left: 50%;     margin-left: -7.5%; }

html:

<div id="container">     <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />     <ul>         <li>home</li>         <li>home</li>         <li>home</li>         <li>home</li>     </ul> </div>

demo


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more