Streaming live at 10am (PST)

Fixed Nav question


#1

I've added a fixed Nav Menu but adding the next section it drops behind the fixed Nav. What's the bes approach to handling?


#2

Add a top margin to the section is what i do 99% of the tine.


#3

if you properly define the header (class, id) Webflow has that offset elegantly built in and takes care of itself. smile I personally prefer to wrap the nav in a div defined as header and then if I need additional margin I can use padding below and auto height and Webflow automagically adapts on the fly. Super great for media queries or special page layouts where I subclass the new height or IX shrinks or moves the header.

I may be leaving out something essential writing this from memory - if it doesn't instantly work post a reply and I will review my steps.


#4

@vlogic Thanks for the information. I guess it's not possible to assign the Header to the Navbar unless its wrapped in a div (I don't have the option showing for the HTML tag at least ).

I've gone at this a couple different ways on sites and not sure either works better. What I've done to be consistent was just use a section behind the menu and then as it scrolls added a background to the nav via a script. It works but there are some adjustment/size issues that have to be made.

I've tried assigning the Header html tag to a section when it's fixed position but I don't get any offset for the sections below...hmmm.


#5

Here is the original post from @callmevlad announcing the feature:


#6

I had that post bookmarked and my section meets the criteria. I must have something throwing it off...wonder now if it's my custom script somehow.

Thanks for the help.


#7

@vlogic
So does this only work with the scrolling or if I have a Header with fixed position and assigned HTML5 header tag should the next section not drop behind? I have z-index of header set to 1000.


#8

It works for the offset for scroll-to anchors only. If you don't want initial content to be behind a fixed header at the top of your site you can add padding or margins on the top section.


#9