Problems with fixed topbar

[Ghiotto]

Hi, I’m trying to have a good fixed topbar and I have found this thread: https://theme.co/apex/forum/t/make-top-bar-fixed/48707/2

I have followed the instruction, but now the logo goes under the topbar during the scroll. I have tried to put more padding on topp of the navbar, but when scrolling there’s a hop of navbar not good to see. I have also tried to lower the logo dimension when scrolling, but it doesn’t resolve the issue.

Can you help me please?

https://lesgomines.it/

Thank you very much

[rad]

Hi Alessandro,

Thanks for reaching out.

Please change the given CSS to this,

.x-topbar {
    position: fixed;
    z-index: 99999;
    left: 0;
    right: 0;
    top: 0;
}
.x-navbar-fixed-top {
    top: 46px;
}
.admin-bar .x-topbar {
    top: 32px;
}
.admin-bar .x-navbar-fixed-top {
    top: calc(32px + 46px);
}

Top bar height is 46px, so the offset top of the header bar (where logo and menu) should be 46px. But there is also an admin bar which is 32px, so the top bar top offset will become 32px once the admin bar is present. And the header offset will be admin bar’s height and top bar’s height.

This should serve as a snippet and an idea of how to achieve it. And only good as given and may not work in the future. We can’t provide support for all given custom code and snippets and you’re free to enhance it.

Hope this helps.

[Ghiotto]

Thank you for your help, but the css rules you have provided doesn’t work very well. You can see it on your own https://lesgomines.it/

Maybe it’s better to modify the script that control the navbar, don’t you think? So, I don’t ask you to tell how, but only if you know where it’s located the script (instruction) that control the fixed navbar, so I can try to modify o create a new one for fixed topbar.

Or if you have another css code that can works could be good as well.

I would like to mantain the effect of navbar reduction.

Thank you so much

[jade]

Hi there,

Please try adding the code:

html .x-navbar {
    top: 45px;
}

This code should push the navigation bar further below to the topbar so that they will not overlap.

As for the script, it is not necessary to locate the default script of the theme especially the code is minified. You may write your own script and that should work as fine.

Hope this helps.