Hero with carousel [solved]

I’m trying to create hero with carousel and sticky nav bar. I was using all info that I could find on forum but It doesn’t work for me. When I set class with ~ -100px to bloc or column or carousel it covers nav bar when web is loading. When scrolling sticky nav works. Anybody has any idea how to make it work?

Is something like this what you are looking for?

I did use the negative margin to move the carousel under the navigation, but then I added the z-index to header bloc using the Code Editor.


Exactly like this! Can you share code for z-index with me?

Yes, of course!

I have added a class .company-header to the header bloc, and then added the following class to the Code Editor - Project Header.

.company-header {z-index:99900;}


1 Like

Yes. That works great.
Thanks Eldar!

Hi @Eldar

I did something very similar as well, then stumbled upon this thread… Neat idea to use the CSS z-index! :+1:

Eldar, how did you change the style of those carousel indicators?
Is there some global class for that maybe?

Thanks a lot!



Hi Maxim,

Sorry for late reply! You can add a class from Class Manager subclass library to change the navigation arrows for carousels.


1 Like

Hi Eldar,

thanks. Is it some kind of global class, or should I define it myself?



It is a default class we have in Blocs.

Open the Class Manager, then click on the ‘+’ button, and then select the class from the subclass library dropdown menu.


1 Like

Wow. Didn’t know about that! Thanks, Eldar! :+1:

You can also look up bootstrap 4 class on Google. Most of them will work in Blocs 3.

Yes, indeed.

But Blocs also seems to use customised bootstrap classes, like .sticky-nav.sticky for example.
At least I couldn’t find this particular one in the official bootstrap classes list. :wink: