Hero with carousel [solved]

piotrek · February 5, 2020, 3:29pm

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?

Eldar · February 5, 2020, 3:57pm

Is something like this what you are looking for?
https://blocstemplates.com/demo/company/multi/

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.

Cheers,
Eldar

piotrek · February 5, 2020, 4:52pm

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

Eldar · February 5, 2020, 5:13pm

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.

<style>
.company-header {z-index:99900;}
</style>

Cheers,
Eldar

piotrek · February 5, 2020, 5:27pm

Yes. That works great.
Thanks Eldar!

Maxim · February 23, 2020, 2:59pm

Hi @Eldar

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

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

Thanks a lot!

Cheers!

Maxim

Eldar · February 25, 2020, 11:41am

Hi Maxim,

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

Cheers,
Eldar

Maxim · February 25, 2020, 12:59pm

Hi Eldar,

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

Maxim

Eldar · February 25, 2020, 1:35pm

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.

Cheers,
Eldar

Maxim · February 25, 2020, 1:36pm

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

Eldar · February 25, 2020, 1:38pm

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

Maxim · February 25, 2020, 1:41pm

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.

Maxim · November 15, 2021, 8:02am

@Eldar Hi Eldar, long time no see!

Eldar, my question is rather trivial, therefore I didn’t want to open another thread…
Could you please tell me how did you put those buttons and backgrounds on top of hero carousel in your company template back then?

I need to put some buttons on mine but have no clue at the moment, since I just moved to Blocs 4 and updated my whole project to Boostrap 5…

Many thanks in advance!

Eldar · November 15, 2021, 9:01am

Hi @Maxim,

I hope all is well with you and your family!

The way I did the menu on the Company template is quite simple:

I moved the second bloc with carousel a little bit up using the negative margin (so it overlaps the menu).
I made sure that the first bloc with menu doesn’t have the background color set.
I made the first bloc’ z-index value high, so it is visible through the carousel.

In any case, I have attached the project file I have created especially for you and anybody who needs this type of navigation.

Company for Maxim.bloc (2.1 MB)

Maxim · November 15, 2021, 9:11am

Hi Eldar,

I also hope both you and your family are doing well these days.
Huge thanks for the explanations and for the bloc. I assumed it was negative margin + z-buffer, but actually hoped there is a simpler solution to that.

Can’t thank you enough! Really.

Cheers

Maxim