Top Menu bar to minimise when one scrolls down


First of all thank you folks for making such a beautiful theme and providing continuous support!!

I wanted to know if there was a way to minimise the top menu bar/header when someone scrolls down a page like we see on the colourlib site as well? I would like to add this feature to all the pages/subpages.



I hope you are doing well today.

In order to do this, you would need to add some Javascript to the theme which falls outside of the support that we can offer but here are a few plugins to try:

Best Regards,


Thank you for your quick response. I’m not looking at sticky menu options. The current menu does stay at the top bar as one scrolls down, but i want the size of the menu to reduce as one scrolls down. The sticky menu option doesn’t let me do that. Plus since i use it for photography, when pictures are viewed on full screen, the menu bar being sticky type appears on top of the image.

Something modification in class=“main-navigation outOfSight” section for the menu bar.

hey there

Please add this CSS in appearance - customize - additional CSS

nav.fixed.scrolled {
padding: 0px;

Colorlib Support Team

Thank you so much the Colorlib Support Team!!! works fine.

:slight_smile: :smiley:

thank you too :slight_smile:
If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews |