[Resolved] Secondary menu fixed in header

[Walt]

I feel like I’m missing something. I’d like my secondary menu to be fixed in the upper right hand corner of my header, and to stay fixed there until both menus switch to the mobile menu. I have GP Premium. How do I do that? Thanks!

[Tom]

Hi there,

I’m not too sure what you mean – do you have any examples?

The primary menu has the ability to be sticky, but the secondary menu doesn’t for now.

[Walt]

Hi, Tom.

Here’s the site: http://development.mrvac.org

What’s happening is that when the window is resized, the primary and secondary menus move around. I would like to keep them anchored in one place – so that they are always on the right side next to the title/tagline. I don’t need them to be sticky, just sitting nicely in the top right-hand corner.

Screenshot: http://development.mrvac.org/screen-shot-2016-10-20-at-3-15-11-pm/

In the screenshot, the menus are positioned so that they are the same height as the site title and headline. I’d like them to stay that way until the window is resized to the point where the menu hits the title/tagline and then becomes the hamburger menu. Does that make sense?

ETA: Or if nothing else, keep the secondary menu pinned to the upper right-hand corner so that it doesn’t move with resizing until it becomes the hamburger menu. Or until I figure out how to do mobile menus 😉

[Tom]

Ah I see.

I don’t know why the secondary navigation stops floating at 1024px, wish I remember what I was thinking there. I’ve removed that in the next version.

You can do this now:

.nav-float-right .inside-header .site-branding {
    float: left;
}

@media (max-width: 1024px) {
    .secondary-nav-float-right .secondary-navigation {
        float: right;
        margin-bottom: 0;
        margin-top: 0;
    }
}

[Walt]

There we go – works like a charm. Thanks, Tom!

[Tom]

You’re welcome 🙂

[Author]

Posts