Theme: Twenty Twelve, add search bar

Bizarre. Looks wrong in Chrome and IE to me. Also, I got the email saying you replied, but I can’t see your reply here in the thread. Strange…

Copied and pasted the code just as you wrote it out, no dice.

Anyone else have any ideas why this might look wrong in Chrome but correct in Firefox?

it seems that it is the placement of your <div id=”nav-search”> in the code which creates the issue. Beingn part of the hgroup which is displayed as block, it appears in that block which rests on top of your menu and that is how Chrome displays it. It is also how I would expect Firefox to display it.

Why did you move the nav-search in hgroup ? You can leave it where it was before and it will work in all browsers.

Maybe I misunderstood… I manually put that there to create a search bar, as there was none before.

Where is the optimal place to put it in the code so it will work across all browsers?

Hey Joshua – I just looked at this again and it looks like you put in below this line of code:

<hgroup>

not below the closing div (which is what I had posted earlier) :

</hgroup>

Sorry I didn’t catch that earlier – also means that the CSS I posted subsequently is not right :(.

Just changed the location of the code to under the closing div. (Whoops. I’m dumb.)

Still showing up in the wrong spot to me in Chrome. ??

Did you clear the cache – the HTML hasn’t changed.

Yup, just cleared it ‘from the beginning of time’ in Chrome.

How about the caching plugin?

Just did. Nothing. ??

It’s working now – yay! See if adding this CSS does it:

.main-navigation {
   margin-top: -10px;
}

In Chrome?! Mine still looks wrong. ?? Even when I cleared cache!

I’ll add that CSS, regardless! In style.css, right?

Yep, at the bottom of the child theme style.css file.

Added. Still doesn’t look right on my computer.

Mine either in Chrome – I don’t know why – I must be missing something – but try putting that last CSS inside a media query:

@media screen and (min-width: 600px) {

.main-navigation {
    margin-top: -10px;
}
}