Keep Main Site Menu Fixed on Scrolling (Disable 'nav.outOfSight' class function)

Shapely
1

I’m very new to website building, and I love Shapely for how much it allows me to do, but I am having an issue with a function of the theme’s design regarding the main navigation menu scrolling up. When I inspect the element, I can see that there is an element that replaces the main site nav menu with this code:

nav.outOfSight {
transform: translate3d(0, -100px, 0);
-webkit-transform: translate3d(0, -100px, 0);
-moz-transform: translate3d(0, -100px, 0);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}

I am hoping that someone can help me disable this element with custom CSS so that the menu does not disappear when users scroll down on the page, even if it is only temporary. I am trying to simulate a ‘taskbar’ type feeling, so a fixed main menu is critical to my goals. I love this theme for what I am trying to build, but this design feature is very annoying to me. I really don’t want to switch to another theme, so any help is very much appreciated! Thanks!

2

Just in case anyone was wondering how to eliminate this feature, I used this CSS code to resolve my problem:

nav.outOfSight {
          transform: translate3d(0px, 0px, 0px);
          transition: all 0.3s ease;
}

However, it is just easier to use the Plugin “Sticky Menu (Or Anything!)” to fix this issue.

3

Hi there

well, thanks for sharing your solution :slight_smile:

4

Hello Jack and Colorlib Heroes,

I need to fix my menu-bar on the top of the screen to prevent it from disappearing.

I’ve tried your code in additional CSS :
nav.outOfSight {
transform: translate3d(0px, 0px, 0px);
transition: all 0.3s ease;
}

but nothing happens… do you think I forget something ?

Thanks a lot

5

Hi @beko

Thanks for the question, but could you please start a new ticket? please also include link to your website and I will check it :slight_smile: