Streaming live at 10am (PST)

Help with scaling fonts and fixed top navbar

#1

Dear Webflow-ers!

I’ve been trying to make my portfolio for a while, but I have 2 issues that are keeping me from finishing it. Also, yes, my portfolio is currently on another account, I had some issues.

So, first of all, my idea is to have a fixed top nav bar, that scrolls with you like any fixed nav bar. The buttons are supposed to scroll the page to the sections they link to (About, projects, contact, etc). However, though it correctly scrolls to projects and about, it seems to scroll to the wrong position in the Contact section. At first, there always was an offset the size of the height of the navbar, so I added empty spacer divs to fix the problem, but it seems it’s not entirely fixed, so I’d love to know the proper way to make a fixed top nav bar. Also, it’d like the page to scroll to the top of the section since they’re all 1 viewport height long. I hope this all makes sense.

The second problem is that my text doesn’t scale well with screen size. On some monitors or phones, the text in my about page just flows into my “profile” picture, which looks really bad. Is there a way to properly scale text based on the size of the device? I changed the text size based on device type, but some phones are taller and narrower than others, just like some monitors display it very buggy.

I hope this information suffices, if not, don’t hesitate to ask for more information :slight_smile:

Thanks in advance!


Here is my site Read-Only: LINK

#2

You have to consider that it’s night time somewhere…and its Sunday. Your instructions for help aren’t clear but I’ll give it a go.

  1. You want the button to take you to the correct part of the contact section. The correct part being identical positioning as other sections.

  2. You want the text to scale and not overflow.

BRB

I’m back, to wish you good luck. The read-only link doesn’t work and the other link is a link giving you instructions on how to add a read-only link. It’s Sunday, happy Sunday.

#3

Sorry, I fixed the read only link!

1 Like
#4

Master Waffel, everything works perfectly on my Mac. Can you screen record what the problem looks like on your end?

#5

Here’s the GIF you asked for. As you can see, it scrolls to the center of the About section correctly, but there’s some empty space underneath it. I tried moving my empty spacer divs around in the hierarchy but it only seemed to make matters worse? http://bit.ly/2RXZLIO

#6

We have a perfectionist in our company. I’ll have a look at the read-only again.

Brb

and I’m back!

The result; when I click the contact button it takes me to the bottom of the page with nothing left to scroll. If this is your desired outcome then the solution is this; change the size of the nav bar to 7vh and the size of the contact page to 93vh. Job done.

Let me know how you get on.

Dids