Hello all!
I have made a transparent nav bar, well one without a background. I’ve managed to make it sticky, however the content rolls behind it. If there a way to stop the scrolling at the base of the nav bar?
Your code so far
https://codepen.io/lydiamay94/pen/abpWbdN
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.
Challenge: Build a Product Landing Page
Link to the challenge:
@Lydia.may I think you shouldn’t make the header transparent. If you scroll the page, the page goes up so that when there is a transparent element you can see those. But there aren’t, like here (freecodecamp forum) you can’t see through the header so it seem like when you scroll all the elements go into the header.
That would be easier, but it’s so pretty haha Ill see if I can get it to match the background, but the background is a gradient.
Hi @Lydia.may ,
Found this article on scroll-margin:
https://css-tricks.com/almanac/properties/s/scroll-margin/
Could be useful.
keep in mind your nav links are on the verge of becoming transparent as well ^^. You want to give them enough contrast not to blend with the surrounding elements. Either use opposite value of light with the background color, or complementary color. Adding text outline can also help.
Hey! My mum pointed that out too haha once I’ve the scrolling sorted I’m going to pick a new colour. I think the same but darker 
Hi the scrolling you describe would be difficult to do with CSS/HTML alone. The link provided by @manjupillai16 is very useful, but runs into issues when the containers you snap to are themselves larger in height than the viewport. So there will be issues when it comes to adding text/responsiveness.
The website looks very elegant. Incredible job so far.
Thank you! It is, I’ve had a look at that link. I thought I’d have a few issues. I can make it look pretty, but because I don’t have someone to constantly ask questions too I feel in the code there’s probably a few errors.
I have seen that I can change the colour of the nav bar/header section upon scrolling with JS so I might have a play with that
Most of your code are well structured and free of errors. Two things that jump out at me are:
body tag should enclose everything within the html element except head, you got a few elements, including your header which is not in the body.br to make space between bodies of text, use another p tag and margin to create the space instead.Here’s a relevant and insightful discussion on br vs margin/padding
As for no one to ask for help, you’ve got this entire forum and don’t be afraid to ask! Ask for feedback when you feel like your project is complete as well.
Thank you so much! I’ll look at those links and read up on when to use be or padding. That is true! I really should use it more I just don’t like feeling like I’m bothering people by asking too much on here haha
I wouldn’t use a transparent header, but you can lightly add contrast , maybe the same color scheme to go with the page, also this code, “background-color: rgba ()”
The “a” represents alpha so you can add a touch of transparency along your desired color!!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.