Fixed Bloc?

@webplus, thank you so much for this tip! I have been exporting my blocs projects as html and then doing CSS tweaking such as this in a text editor. This is a tremendous time-saver for me! Thank you again!

1 Like

Hello @webplus Is it possible that you please can do a short step by step introduction ? I am new to blocs and I don’t get it to work … Wich code I really need, were must the code be… is the row into the block or a new block… and so on :blush: I am really sorry!
tom

Hello @tom2, yes I can make you a video on saturday, tomorrow I unfortunately have no time.

Hello @tom2 here is a video. Hope this helps:

http://blocs-extensions.com/help/videos/fixed_header/

Here is also the project file: fixed_header.bloc (736.4 KB)

Hi @webplus thank you very much!!! Really cool! But … A last question. When I scroll down the Page and then open the Menu, the menu stay at the top of the page, and you don’t see it ? Do you have an Idea how I can fix this ? Its also in your project file … Thank you so much …
tom

@RME, Now that you’ve already set its position to ‘fixed’, you’ll now just need to move that large image bloc (which is behind) down using the ‘top’ css property.

Like this:

#photo-bloc { (whatever you named that bloc)
position:fixed;
top:200px; (height of top nav bloc)
}

@tom2 You are welcome. You can fix it like @Creative explained it, or simply by adding the “fixed-blocs” ckass also to the menu bloc

You then need for the top row and the menu a different class for setting the height.

Here the updated project file: fixed_header.bloc (737.6 KB)

I also added a class “layer” to the mega-menu. The class has to be added in the code area, it contains a z-index with a hight level then the top row, otherwise the image/logo will be cut, when you open the mega-menu

1 Like

@Norm an option in the class editor in Blocs3 for setting the z-index of a class were very helpful.

@webplus Perfect! It works !! Again, thank you so much …
tom

1 Like