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

Community Forums Forums Design Tips and Tricks Keep the Header Right Nav from moving below logo on resize?

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  John 1 year, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #56246

    notfarnow
    Participant
    Post count: 18

    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/
    #56354

    AC
    Blocked
    Post count: 7712

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

    #56366

    notfarnow
    Participant
    Post count: 18

    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!

    #58646

    Protospace
    Participant
    Post count: 1

    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…

    #64105

    John
    Participant
    Post count: 157

    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 ;)

    #64106

    John
    Participant
    Post count: 157

    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 ;)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.