Public Forums 71,145 posts

[improvid Friend improvidJoin date: March 2017Posts: 16Downloads:1Uploads:0 Thanks: 1 Thanked: 1 times in 1 posts]

#1073361

Hi,

I would like to have a sticky menu. I know I can enable this, but this does not give the desired effect. I only want the navbar to be sticky not the logo above it. How can I achieve this?

The website URL is: http://salonbri.improvid.nl/

Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1073518

Hi,

You can enable the Sticky option and add this custom css: http://prntscr.com/h8j4wm

.jub-block .header.affix {
position: relative;
}
.jub-block .header.affix .navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1031;
    background-color: #fff;
}

[improvid Friend improvidJoin date: March 2017Posts: 16Downloads:1Uploads:0 Thanks: 1 Thanked: 1 times in 1 posts]

#1073561

Thank you very much!

1 problem. After one little scroll the navbar will sticky (jump) to the top. Can we make it so that it will sticky after it is scrolled to the top by the user and not jump so that the transition is smooth and seaming less?

Thx!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1073910

Hi,

This will require some custom css transition.

[improvid Friend improvidJoin date: March 2017Posts: 16Downloads:1Uploads:0 Thanks: 1 Thanked: 1 times in 1 posts]

#1073939

Could point me in the right direction or provide a link?

Thx

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1074242

Let me check if I can help as it requires a bit customization.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1074469

Or you can try to use 2 header blocks in header section:

• One block displays logo only
• Another block underneath the first one shows Main menu only > and set this block to be sticky.

[improvid Friend improvidJoin date: March 2017Posts: 16Downloads:1Uploads:0 Thanks: 1 Thanked: 1 times in 1 posts]

#1074528

I will try that. Thank you!

[Author]

Posts