Menu Split by logo – WP Twenty Fourteen

[r3quiem]

I have been recieving help on another part of the forum from @chrisburton and @wolfcry911 as to possible solutions and would appreciate any help.

I am using the WP Twenty Fourteen theme and looking to split my top navigation menu in 2 around a central logo (img which will be used as a link)

Current Navigation: http://s22.postimg.org/a62l7kckh/Top_Nav.jpg
Desired Navigation: http://s27.postimg.org/o2wlaiwyr/Top_Nav_wanted.jpg

I am new to PHP.
If this could be done solely with html/css that would be great, however I cant find the HTML running behind the wordpress theme.

Thanks in advance

[chrisburton]

Let me know when you get the FTP issue sorted out.

[r3quiem]

Hi @chrisburton

I have done exactly what you said

@r3quiem I contacted Chris Coyier to get the above post fixed so you could copy the PHP to put into your theme. I no longer use WordPress because it’s pretty much overkill for most websites so I had to download it for the following answer.

First, let’s get organized.

Create a file inside your theme and name it menu.php. Now, go into header.php and scroll down until you get to the navigation. Copy the navigation to menu.php and save. In header.php, replace that navigation code you’ve just copied with the following:

include ‘menu.php’;

menu.php should look like this
header.php should look like this.

From this point I will have to wait until the post above is fixed so I can copy the code and help you further. At least your structure is a bit more organized.>

But now I seem to have lost my nav completely. Am i supposed to name the 2 anything specific?

[chrisburton]

But now I seem to have lost my nav completely. Am i supposed to name the 2 anything specific?

What do you mean you’ve lost it? Post your header.php and menu.php

[r3quiem]

EDITED: DELETED

[r3quiem]

@chrisburton

header.php (in parent theme)

http://pastebin.com/raw.php?i=QnJLh5Hj

menu.php (in child theme)

http://pastebin.com/sKM9EsHm

The navigation has disappeared from the top of my page when I implement those changes.

[chrisburton]

That’s because of a few reasons:

• You didn’t use php tags in your include. It should be <?php include 'menu.php'; ?>
• Also, if 'menu.php' is not in the same location as header.php, you need to change it to 'path/to/menu.php'.

If that doesn’t make sense, let me know.

[r3quiem]

Hi @chrisburton

OK I now have the menu.php in the same folder as my header.php, the code has been changed to the php function you gave me. The menu is still there.

How do I now get the logo in the middle?

It is still currently 1 menu also.

Thanks

The site is currently live while I recieve some help

Let me know if you need it unlocked to take a look.

[chrisburton]

@r3quiem I’ll help you in a little while if that’s OK. I just got in from traveling.

[chrisburton]

@r3quiem In your WordPress admin section, go to Appearance > Menus. You need to create two separate menus. One for the left side and one for the right.

Then, in your menu.php file you need to edit your code to the following: link here

Notice the 'menu' => 'Main' and 'menu' => 'Secondary'. Change those to whatever you named your two menus.

[r3quiem]

@chrisburton

Thanks for this

OK I have called
first menu is called ‘Main Menu’
second menu is called ‘Second Menu’

I have edited menu.php to include the code you just posted in the link, between the nav tags.
I now have ‘menu’= ‘Main’ and ‘menu’ => ‘Second’

I have unticked the “Top Primary Menu” to place it in top menu on both, let me know if this is right? Menu Settings

Click here, I have taken maintenance mode again, and you can see what has happened. First menu has appeared, Second is not there, and there is a massive gap before the content.

Cheers

[r3quiem]

Sorry I have been messing with a bit more since.

Ive realised that ul id=”secondary” was taking all its styling from a navigation which is set for the left hand side, so I have now changed this to be primary-navigation so that it becomes part of the primary nav. So it has now appeared.

Looks like we are getting there!

Essentially what I need to do now, is get the 2 menu’s on the same line, and plonk that logo in the middle of them with a link to the main page.

Im guessing I could hack that logo in around the h1 mark with an a href and img? So its just getting them up on the same line really which is the issue. Not sure if its previous styling Ive done or php which is preventing that at the moment?

Thanks!

I am so happy this is coming together, this has been a headache for me for weeks!

[chrisburton]

@r3quiem What you can do for your logo is:

.logo {
    background: url('path/to/image.png');
}

I have the CSS in that previous thread where I mentioned the PHP code if you want to find it. That will line up the menus but you may have to mess with the logo margins.

Remember that in the PHP code where it showed <ul id="main"> and <ul id="secondary">, they need to have different ID’s or classes so that you can separate them.

[r3quiem]

@chrisburton

Logo:
Ive tried this and it wont add as a background image to the h1. I added the exact css you put there, with the link to the image. Now I have removed the class system for the h1, and added the logo as an img so all elements are there, just need them inline now. Been messing with firebug but cant quite get the logic to the problem.

Inline:
If i changed the id on the second menu would it not lose all the styling brought though from the parent/child themes? I can’t quite figure out why its not going into 1 line, comparing with the php you posted on the first page of the previous thread.

Thanks

[chrisburton]

@r3quiem The reason you are having trouble is because:

• You changed the code within the PHP from <ul id="secondary"> to <ul id="main">. So now both menus have an ID of main. They need to be different from each other so that you are able to position one to the left side of the logo and the other to the right. Make sense?
• You have not used CSS to position the menu and logo inline with each other.

If you need help, please paste the code I gave you previously into menu.php. Of course the page is going to look weird because you have not created the CSS to position them where they should go.

[Author]

Posts