I’m learning webflow and the way I like to learn is to deconstruct things.
So for example, the ‘container’ component is just a div block with a max width styling and responsive styling already done that has a ‘lock’ on its width properties so it can’t be altered.
I’ve been trying to deconstruct the navbar thinking that it’s just a section but it doesn’t follow the same rules? It seems to completely do what it wants and doesn’t abide by the same rules with its children as a section would?
Am I missing something?
Is the Navbar and its children more than just a pre-styled section with a bunch of link blocks inside?
Thanks guys!
P.S. Is a ‘Section’ identical to a divblock but just forced as top level ie. it can’t be nested in anything except the body, is that the only difference? Or is it ‘special’ in some other way to a divblock? (I realise it stretches across the whole site by default but a divblock could do the same with 100% width right?)
Hi @JTL James, yes the container is a fixed width div block of 960px.
A div block can be sized at any width and height.
The Navbar is a Section that has been custom designed with preconfigured link blocks, a menu icon for tablet and mobile (includ. dropdown feature of the menu), and a link block for a brand logo or whatever else you would like to link to. The Navbar can be place inside a Section block as well if you need to tho. Although you shouldnt have the need.
And the Section is a top-level div that cannot be nested inside another section block, only within the body tag.
Forgive me for continuing. My question really is about the fundamentals and rules of web development and how that relates to webflow.
I’m trying to learn the foundations and the ‘rules’ for each element (div, container, section, navbar)…
So for example the navbar that I can drag in from components, that is something that has been custom designed and locked… by the staff at webflow right to behave in a certain way…?
The reason I ask is because certain aspects of the navbar behaviour don’t perform the same way as it would if I were to create a section, a div and a bunch of normal link blocks.
I hope I’m explaining myself properly, just want to be sure that I’m not going mad as I’ve been trying to figure out why the nav bar works the way it does by comparing it to the fundamentals of html/css and it just behaves really strangely…
You know, after several years of working with Webflow, I sometimes struggle with some predefined WF elements as well, haha. Navbar is weird (for example trying to make it a flex and set it to space between never works as expected) so I usually end up creating everything from the simplest elements - divs, styling them as necessary to keep everything true to the fundamentals of html/css you mentioned.
Thanks so much, it would be great if this was written somewhere because I have been going insane trying to figure out why the navbar doesn’t function like a normal div/section!
What other predefined WF elements are different? Just so I know before I come in touch with them.
A list of all the components that behave different to fundamental html/css rules would be most helpful for newbies like me!
Also what is the point in the ‘image’ element you can drag in? Is it just a placeholder? Why not just drag in the image from the library?
Finally, can you confirm the only difference between ‘COLUMNS’ and ‘GRID’ is that Columns can’t be resized / gap resized? And also of course that columns don’t have rows? (you’d need to add another column underneath). I’ve watched all the videos I just want to understand the fundamental differences between these two.
I think only section, container, columns and navbar container. Many other elements are definitely have predefined parameters but you can see them most of the time in the styles panel (like preset margins, paddings etc).
You can give this element a class and style it. The image itself is not really an object - it is just a link to the image, its source inside of the actual image element that you are pasting.
No, grid is a completely different layout method. You can read about it here. The grid element is just a convenient and fast way to add it into your layout. The same can be achieved by inserting simple div and changing its display property to grid.