Link not taking me to the top of the page I'm linking to

Design help General
1

I’m building out a site for my personal portfolio and I’m creating a footer on each page that links to the next project. When I click the link, it doesn’t take me to the top of the next project’s page, rather it loads at the bottom of the page.

Below is a read-only link. Is this something that will only happen in preview mode? I haven’t published the site yet.

Here is my site Read-Only: https://preview.webflow.com/preview/rk-portfolio?preview=88a1084e81d6ac383814661fd8fe1117

2

On your “Flex Wrapper”… remove the 100vh and just let the content dictate the height size… you could add 100vw on width… but the way you’ve design the site is Fabulous! I like the uniqueness… But you don’t need the sizes on height. The link will take you to the next page at the top of the browser :slight_smile:

3

Thanks!

I just tried taking off the 100vh and that does fix the linking problem. Yay!

However, that makes my sidebar navigation lose it’s fixed quality. I tried changing it’s position to fixed, but then the whole layout breaks. Any ideas on how I can keep the sidebar’s look as is?

4

Oh dang okay… let me take a look real quick…

5

I was tinkering, and I think I fixed it…but I have no idea what I changed. Ha.

6

Okay did you save it and republish? I’ll look at what you did and I can share your options because … really you have 2 choices with your design:

  1. Sidebar over full width content
  2. Sidebar next to full width content

The difference will show when you cascade down to tablet and mobile. That’s going to be your final decision-maker, because

Option #1 = will mean you don’t need to change sizing structure, but you have a slightly off-center lay-out. The nice images you have will show a little on the left, but a lot on the right. Due to centered flex. And you will resize on all viewports - all the images and divs :frowning:

Option #2 = you could take advantage of % design and only tweak a few settings on viewports because it will naturally take on responsiveness as you continue to develop :slight_smile:

Just an FYI

7

I definitely want to make my site responsive…which will be my next big challenge.

here is a link: https://preview.webflow.com/preview/rk-portfolio?preview=88a1084e81d6ac383814661fd8fe1117

8

Okay I see… it is fixed on scroll and link works fine… the sidebar and main content is the next step I presume. The way you have it now, I’ll be honest is going to be tough for responsiveness. The homepage is Great! The other pages, which can basically be template content holders for all, really need 1 more div layer to do it the right way. I would add:

  1. One div above all, just under body - could be “Main Wrapper”
  2. Drag both “Sidebar and Work Content” inside it
  3. Set Main to flex
  4. Remove all the sizing and all the styles on sidebar and content divs you want to start with a clean slate
  5. Simply set Sidebar width to 20%, and Content to 80%

That will be a good foundation for your layout design.

9

my tip: for simple layout (like the logos area of skills)
Use flexbox build in columns (Why? Its easier to control the responsive - layout like this - in seconds).

Also this libary will be classic for your site (For the project next/prev)

10

These transitions look great! I’d love to implement those on my site, but I would have no idea where to start. I’ll have to do some reading to figure it out.

11

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.