[Support request] How to make primary and secondary navigation sticky together?

Home Forums Support [Support request] How to make primary and secondary navigation sticky together?

Home Forums Support How to make primary and secondary navigation sticky together?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #566736
    pz

    Look at my site: https://autoinformator.pl/

    I want to make primary and secondary navigation sticky together. Now only primary navigation is sticky. I wonder if there’s a way to do it without third party plugins or codes using only GeneratePress funcionality?

    GeneratePress 2.1
    #566963
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try something like this:

    .navigation-stick + .secondary-navigation {
        position: sticky;
        left: 0;
        right: 0;
        top: 50px;
    }
    #567013
    pz

    Thank you, however it works only for non-logged-in users. After logging only primary menu is sticky. Why?

    #567480
    Tom
    Lead Developer
    Lead Developer

    I would have to log in to know 100%. Are any other elements introduced once you log in?

    #826915
    Rodolfo

    Hi Tom,

    I was just looking for the same behaviour and found this thread.

    It works here, like PZ said… If I’m logged, does not work.
    At this moment, it is not a problem (for me)… but it would be better if we can make it works when I’m logged too.

    Any idea?

    Thank you.

    Just to you know… I added some extra css to hide shadow effect:
    .sticky-enabled .main-navigation.is_stuck
    {
    box-shadow: none;
    }

    #827026
    Tom
    Lead Developer
    Lead Developer

    Any chance you can send us temporary login info so we can take a look?: https://generatepress.com/contact

    Be sure to mention this topic if so 🙂

    #827202
    Rodolfo

    Tom, good morning!

    I got the problem… “Admin Toolbar”… in this case, top: 50px is not enought to show secondary navigation.
    In this case, we should increase about 32px to push secondary navitation …

    For example:

    If not logged:

    .navigation-stick + .secondary-navigation {
    position: sticky;
    left: 0;
    right: 0;
    top: 50px;
    }

    If logged:

    .navigation-stick + .secondary-navigation {
    position: sticky;
    left: 0;
    right: 0;
    top: 82px;
    }

    Is there a way to do that?

    #827231
    David
    Staff
    Customer Support

    Hi there,

    Wordpress adds the admin-bar class to the body when it is in view. So your logged in selector would look like this:

    .admin-bar .navigation-stick + .secondary-navigation

    #827240
    Rodolfo

    PERFECT! Great!

    David, just to know…

    The final css would be it? (I mean, should I repeat position, left, right and just adjust top value?)

    .navigation-stick + .secondary-navigation {
        position: sticky;
        left: 0;
        right: 0;
        top:45px;
    }
    .admin-bar .navigation-stick + .secondary-navigation
    {
        position: sticky;
        left: 0;
        right: 0;
        top:77px;	
    }
    #827242
    David
    Staff
    Customer Support

    You only need the properties that are changing. In this case its just the Top property.

    #827264
    Rodolfo

    Done! … thank you!

    #827409
    David
    Staff
    Customer Support

    You’re welcome. Glad we could be of help.

    #829855
    Rodolfo

    Hey again! …

    It is working, but I just created another problem here…

    I use anchor links and smooth-scroll class. So, when I click a link, H2 heading is hiddens, in back of second navigation area…

    Is there a way to fix it too?

    URL: http://www.computar.com.br – For example, in main menu, just select “SOLUÇÕES” menu and you will see it…

    Thank you.

    #829916
    David
    Staff
    Customer Support

    The simplest way would be to use some CSS to add some padding to the H2 elements.
    Currently there is 86px top margin so you could split this between margin and padding e.g.

    h2 {
        margin-top: 45px;
        padding-top: 40px;
    }
    #829989
    Rodolfo

    Perfect! … Thank you!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.