Menu Split by logo – WP Twenty Fourteen

[r3quiem]

Hi @chrisburton
Sorry this is taking so long, I am still getting my head around how all this works. I have only been working with CSS for about 6 months if that.

Here is my current
Menu.php
Header.php

I have left the site live. I dont know if my previous CSS changes are affecting me trying to position them, but its constantly affecting both first and second menu’s.

Im not massively confident on how to write out ID css, I’ve generally used classes for now. If you could lead me possibly in the right direction with this that would be marvellous, or let me know if something I have done previously is stopping me from getting them inline.

Again, thanks so much for your help, it is hugely appreciated.

Rich

[chrisburton]

@r3quiem

In menu.php, please change this:

<ul id="Secondary">%3$s</ul>'

to this:

<ul id="secondary">%3$s</ul>'

I have only been working with CSS for about 6 months if that.

Im not massively confident on how to write out ID css

Wait. You have spent 6 months using CSS and you have no idea on how to write an ID in CSS? Where have you been educating yourself? That is one of the most basic steps you start with when learning CSS.

I would be more than willing to help you if it appeared that you were putting some effort into it but not knowing how to write an ID for 6 months when all it would have taken is a google search, that’s…I’ve never heard of that before.

/**
* This is how you write a class in CSS (use a period).
*/

.class

/**
* This is how you write an ID in CSS (use a hash symbol).
*/

#id

[r3quiem]

@chrisburton

Hi Chris,

I know how to reference an ID, thats not my issue. I am not completely adverse to using them, and have used them, however in this particular circumstance I am getting quite lost in this. Its my first WordPress and the mix of PHP, CSS and generated HTML is a bit confusing is all. Had I been creating it from scratch in HTML/CSS I could get it done, but it needs a simple back-end as my friends don’t have a clue about any coding.

I am currently not sure if the css I created to centre align the navigation is preventing me from getting this all in 1 line. I need to see code to work out how it works generally, but as this is specific to my task I have been unable to find a guide on the web other than your solution previously.

I have changed the php to “secondary” now, but this has a load of css already set up which I have altered previously in the child theme due to it being an unwanted left navigation of the original theme.

I know how to use margin’s but until they are in the same line which I cant quite figure out, I can’t position them correctly.

Sorry I really dont mean to be a pain, this is the last of my big hurdles to overcome.

[chrisburton]

@r3quiem

Yeah, your CSS is a nightmare. You have clear:both; and oddly calculated margins on all your h1, h2, h3, h4, h5 and h6 elements.

If you used float: left; on .main and your logo along with float:right; on your .third menu, you’d be getting somewhere. But first, let’s start with your logo.

.logo {
    width: 150px;
    height: 72px;
    background: url('path/to/image') no-repeat;
}

Now remove the image tag in your PHP code that produces the logo image.

[chrisburton]

Actually, scratch the above if you can. What is your deadline for this?

If I were you and you have a few days, I would start with a blank theme. This way you don’t run into issues like you are now where the default CSS is overriding things. Basically I would start from scratch.

If I can give you a few tips:

• Don’t use WordPress for small sites like this, it’s overkill. Go with something like Kirby.
• Start with HTML and CSS first and then implement that into WordPress if you refuse to use anything else.

[Author]

Posts