Keep the Header Right Nav from moving below logo on resize?

[notfarnow]

I'm trying to keep the custom nav that I've placed in the Header Right widget area from dropping below the logo in a modified Executive theme.

When the browser resizes (responsive), the navigation (or whatever is in that widget area) jumps below the logo and they both center.

I'd like for the navigation to stay in line with the logo and right justified and the logo to stay left.
My nav only consists of 2 small buttons so it will fit fine with exception of mobile where I'll be using
a mobile menu.

I've used this: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/ so I can have a linked, responsive logo instead of using the custom header. I can scrap this if needed.

http://demo.studiopress.com/executive/

[AnitaC]

What is the link to your site so we can see your code please.

---

Need help with customization or troubleshooting? Reach out to me.

[notfarnow]

Hi anitac, I put together a demo version to work with here: http://www.gotoddrun.com

if you resize your browser, you'll see the 2 nav buttons in the top right jump around.

I'd like them to stay along the same line as the logo when resizing the browser.

Thanks!

[Protospace]

I'm having the same issue. I found info on how to make it work (http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/) - (OK, so it's not for Executive) and it's not working, either.

Here's the other issue: Executive is already a child theme of Genesis. If I make changes to Executive, they'll be overwritten if Executive gets updated. Not too happy about that...

[John]

notfarnow,

It's a CSS issue, which I wasn't able to completely address in that tutorial without it becoming book-length.

Your #title-area is switching to width: 100%; when your browser hits 1023px and below, which pushes the widget area underneath the logo. So if you remove #title-area, from line 2123 in your style.css you'll be moving in the right direction, though you may need to make some further tweaks to get it just right.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Protospace,

I'm using that logo replacement method on several sites that are running the Executive theme and it works great. What isn't working for you?

RE theme updates, those are few and very far between, and a theme isn't like WordPress - you don't have to update if you don't want to.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts