Secondary Menu Sticky

[María José Perales]

Hi!!
I need the secondary menu to keep sticky like the menu, how can I do it?
And in mobile version, I would like to use a diferent secondary menu, so it doens’t shrink to a hamburger menu too.
Thanks.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María José Perales]

Hi Leo!

Sorry for the delay on this answer.

I’ve already sent you the access to this website.
Tell me if you got it.

THank you

[Leo]

I don’t see it in the inbox.

Can you provide here in the Private information box that we recently added?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María José Perales]

I already sent it.
Thank you

[Leo]

Sorry I’m not seeing any info added.

This is the box you can use:
https://www.screencast.com/t/t2e00JAZAW

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María José Perales]

Hi! Sorry Leo, I didn’t know this.
I already publish the website, in case you wanted to look at it.

proyectovio.es

[Leo]

Try this CSS:

@media (min-width: 769px) {
    .secondary-navigation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }
    .main-navigation {
        margin-top: 40px;
    }
    #sticky-navigation {
        top: 40px !important;
    }
}

Then you will want to remove the transition on as that cannot be done with the secondary navigation:
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-transition

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María José Perales]

Hi Leo,

I put the css and it works but only in the mobile version. :/

In mobile, the menu shrinks. One option could be create another menu, without the characters (number and email), but only with the logotypes. I don’t know how to asign one menu for the secondary menu on mobile version.

[Leo]

My CSS should only work for desktop with the media query.

Looks like it’s working for me?
https://www.screencast.com/t/rjJhnApzRV

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María José Perales]

It works ok.

But the menu shrinks on the mobile version and uses the hamburguer menu. I need to show the normal menu or create a new one with only icons, and use it on the mobile version.

[Leo]

Can you open a new topic for the separate question?

The sticky secondary menu question is resolved already.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts