Menu Split by Logo

[Tom Houy]

If you would prefer to stick with an unordered list for the menu, and still have the logo itself clickable as a link to the home page, then I would probably just do the following:

• An unordered list with your links styled as a horizontal menu
  • Followed within the HTML by your logo

  • Use an N’th selector on the LI’s to add some extra margin between the middle of the link list

  • Center the logo, and use a negative top margin on it to position it in the middle of the menu

If you would prefer to not use the Nth selectors, you can use custom classes on the LI’s as others noted.

[chrisburton]

@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.

[r3quiem]

Hi guys,

Much appreciated on the help.

I have 2 problems

1. @chrisburton – I currently cannot find a way to log into the ftp linked to the site, the information I was given by my host, I cant quite seem to figure out how to log in and I am unsure how to create that menu.php file. I have used the Child Theme Configurator plugin to create my style.css which seems to have function to import php files from the original theme but not to create a new one. Any ideas?

2. @wolfcry911 – I am more used to editing HTML, but as this is create dynamically with php in wordpress I dont understand where I would use your penned code? And also would this be over-written should an update occur in the Twenty Fourteen theme?

Sorry guys, I know I am an absolute n00b, I am just getting a bit paniccy as I need to try and get this done for Monday.

Thanks

[Paulie_D]

We’re getting off the original subject here.

The above post should be a new thread in the PHP section.

[r3quiem]

Hi @Paulie_D,

Should I be creating a new thread? I don’t want to lose the progression people have already made in this thread towards my end goal. I am currently unsure whether I can achieve this using HTML/CSS as in wolfcry911’s example or the php option that chrisburton has put forward.

Thanks

[Paulie_D]

You can always provide a link to the original discussion in a new thread.

If you have WP/PHP issues start a new thread in the appropriate section.

The CSS area is more about basic HTML & CSS not about how to get your WP site to output the finished code.

I appreciate that there may be some overlap but the subject of this thread was the basics of the menu layout…not how to get WP/PHP to do the output.

[r3quiem]

Apologies I am new to all this,

I have set up a new thread here

https://css-tricks.com/forums/topic/menu-split-by-logo-wp-twenty-fourteen/

[kozmaflorin]

this is the solution I found to be the most helpful: http://collision.studio/wordpress-menu-split-by-logo/

[Author]

Posts