Product landing page anchor/menu problem

Code Feedback
1

Hi,
I am almost done with this project. I need suggestions as to how to get the anchor to my menu links to clear the 150px height on the nav. Right now I can only seem to get the classes link to show using a margin-bottom: 150px, the other two are hidden behind the nav bar. This doesn’t really work because it leaves a 150px margin in a spot where I don’t want it. Anyone have any ideas or know a work-around?
Thanks in advance! https://codepen.io/barb1643/pen/wLwGaG?editors=1100
Barb

2

You should put a link to your project up so we can check it out.

1 Like
3

https://codepen.io/barb1643/pen/wLwGaG?editors=1100 . Sorry, got distracted…

4

It looks like a lot of your divs for the nav-bar links are in confusing places to me.

First, you need to style your divs #about, #classes, #pricing with the same class name but then have the nav-links goto the ids. Secondly, things still won’t be lined up until you investigate the ::before selector in css.

As of right now it looks like you are styling each id individually, then trying to make another id to send the nav-bar links to. And my suggestion is to use one class to style all three sections with but also give them a separate id so the navbar knows where to go.

5

Hey`barb1543 i was wondering how long did it take you to build this page? I’am new to coding and i’m trying to figure out how much time i should spend building such projects.

6

Hi @Adriaannunes Welcome!
It could have been done in a day using bootstrap but I wanted to learn flexbox while building this page so it took longer than it should have, I think it took about a week and I did 2 versions. I couldn’t get the first layout to work so I bailed and built this one. I’m glad I took the time to learn flexbox though. The page still has some tweaking to but I’ll get there and you will too. Just keep pluggin away at it!

7

Yes @saclark12000 I know the links were in strange places because I was trying to get the anchors to land at the bottom of the header/navbar instead of the top of the device and I still can’t get it. I took your suggestion and reconfigured the divs with the same class name etc., much cleaner. I think I can do that in a couple of other places too.

Are you saying I should use the ::before on the nav-bar? I’ll give it a try!