▼
Streaming live at 10am (PST)

Header width set on page load

Design help General
#1

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.

image
image1596×106 39.1 KB

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: https://micahs-fabulous-project-898bc8.webflow.io/

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

#2

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

#3

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.

#4

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:

#5

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.

#6

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