Stupid question about design structure in Blocs

[DeepShader]

Hi there, currently I’m using Webflow and I like the idea of having an iPad app for Webdesign. So I tried Blocs on my Mac.

After a few test I run into the first problem:

(Screenshot from Webflow)

I want to create a simple navigation header. The navigation itself is no problem. The problem is how it should look.

In Webflow I would create a div-block (A) and inside two other div-blocks (B + C).

• A just holds B + C and the background image.

• B would just get a fixed height with a dark grey and some opacity.

• C would also get a fixed height, dark grey with opacity and it would hold the complete navbar inside.

In Blocs I added “Navigation Menu Right”, but then I can’t find a way to add a div directly into the Bloc.

Is there a trick to archive this simple thing?

Thank you

[TMRJIJ]

It’s a little hard for me to visualize what you’re doing without actually looking at the Webflow project or exported code. Do you have an example of the full Navigation Bar on Webflow?

The Nav Bar itself within the Navigation Bloc can be removed leaving an empty column. From there you can create your B and C divs with custom classes for each.

As far as Div A, the container within prebuilt Navigation Blocs has a class called .container-fluid. You may be able to change that to your liking but I wouldn’t recommend it. You could just add a class to the bloc itself to change the background image.

[DeepShader]

I uploaded a demo site temporarily to show what I try to recreate in Blocs:

https://navdemo4blocs.webflow.io/

In Blocs I can’t add the darker top-bar above the navigation, because I can’t find an option to add a Div container above it.

[TMRJIJ]

So you want to add a Bar above Navigation Bloc or inside the Navigation Bloc. Each Bloc is in itself a Div Container. From the looks of it, both Divs are separate within a Header Div that encompasses most of the page.

I have two options for Blocs:

1. Create an edge-to-edge Hero Bloc with a prebuilt Navigation row. You can have a class for the Top Nav Row and a class for the background. From there, you can add another bloc on top as your Header Bar and can have the Hero Bloc get a negative margin and negative z-index to get it under your Header Bar.
2. Create three separate blocs: Header Bar, Navigation bloc, Hero Bloc w/o Navigation. Create your classes for each, then have the Hero Bloc set with a negative margin and negative z-index under both the Navigation and Header Bar Blocs.

I threw together a quick attempt at recreating what you had. Unfortunately, Blocs is buggy on my end with macOS Ventura Beta so you may need to download the Blocs 4.5.2 beta to play with it.

navdemo4blocs.bloc.zip (820.2 KB)

[KBConcepts]

@TMRJIJ

a quick attempt

That was very cool of you to share this information with everyone and put up something that we all could play with.

[Jerry]

Alternatively, you could use the standard bootstrap class .fixed-top instead of using ‘sticky’ but you will need to add:

.fixed-top {
	position: fixed!important;
}

to keep it ‘fixed’

[DeepShader]

First thank you for your demo-file

It’s a nice workaround but technically not what I’m looking for. This reminds me of working with RapidWeaver, where everything feels like a workaround

So there’s no way to add div containers by my own inside another div container?

[TMRJIJ]

I’m sorry my solution wasn’t exactly what you asked for. While you can add div containers within div containers in general, the primary div containers/sections of Blocs Websites are ‘Blocs’ themselves. It follows the Bootstrap Framework closely but WebFlow seems a little different from my limited experience.

Currently, the Design Canvas only lets you add elements within a prebuilt ‘Bloc’ div container but you can also add classes to the Bloc and overwrite some of its attributes to your liking.

Perhaps other forum members can be of more assistance?