Streaming live at 10am (PST)

Header width set on page load

When I load the page into a browser everything seems fine. However, if I change the browser size, the header width does not change. Looking at the inspector, it seems that a hard-coded width is being applied to the header on load, depending on the browser size. I’ve tried forcing the width to 100% in Webflow, but it has no effect.

Searched like crazy, but not finding anything similar out there. Anyone else have this issue before?

Here’s the live version where you can see the issue:

Here is my site Read-Only: Webflow - Micah's Fabulous Project

Hi Micah, from a very quick glance it seems that your ‘position:fixed’ is causing this, as it fixes the width the initial browser width… Try looking at some tutorials on Sticky Nav in WF to find a good solution for your needs. Cheers, Pat

Interesting. Thanks, Pat. I’ve looked around and haven’t really seen this issue (it’s the same if I go sticky), so I’m not sure exactly what it is I’m doing wrong. I’ll be upping my plan shortly so I can add custom code, and I was going to try to force width 100% through CSS. Seems to work when I try it in the inspector. Thanks again.

Had a second look Micah, not sure where the exact problem lies. Have you tried to build it from scratch just with divs instead of pre-composed WF layouts? Then use flex instead of grid for your container holding the nav items? Here’s a very very quick setup for you… Hope this helps! :slight_smile:

Hey, Pat. Thanks. However, just using a normally placed element won’t allow the nav to stay on the page during scroll. It’s all good though. I’m pretty confident I can force the 100% width with custom CSS, overwriting the hard-coded width that’s most likely coming from javascript somewhere. The fact that I have the nav animate on scroll may be the reason it’s adding a width in there, although I don’t animate the width. If this is indeed a piece of JS doing that, there should probably be a window resize check.

@MicahR Ah excuse me, I was too rushed… please check my example again!