How can I make my text appear below the navbar?

HTML-CSS
1

Hi everyone! I hope that you all are having a beautiful day.

I am trying to design a portfolio website using HTML/CSS and JS. I am done with the animations, switching to a navigation bar, and the website’s general design. When I wanted to add some content to my website as text, I saw that the div with the website content expanded to the top of the webpage and went through the navbar.

How I want it to behave is that the div will always start aligned centered and below the navbar itself. I know I have to do something with the relative positioning, but I am unsure how. At the same time, my div should expand down as much as needed so that I can scroll through the website. While trying to fix this, the div became scrollable rather than covering the whole page and making it scrollable.

I hope that someone can help me with this. Thank you so much.

Best wishes.

https://codepen.io/dderingezgin/pen/LEPBNLj?editors=1000

2

Okay so one. I’m confused on why you have CSS in the index.html file. Your page should look like this. They give you 3 pages to start with HTML, CSS, and JS. The script in the index.html file seems fine, as it is defined, also if the script is JS I’d write the script like this, but I’m unsure if codepen allows that.

<script type="text/javascript> </script>

image
image859×530 37 KB

3

Hello, I put all your code in three files HTML,CSS and JS then linked everything just to make it simple. Also commas in your CSS in-between the selectors, I solved the text issue but changed the layout so looks like more work needed. Good luck

4

Sorry this is my first time using this platform but where can I see your end of the code? My side of the code is not updated.

5

@dgezgin
He made, his own codepen, copied the code, and sperated it, I can do what he did if you’d like.

6

It should be now, I’m not sure if it is, but it should be, I’m unable to fix the border as I don’t know where it starts but I fixed the CSS, HTML, and JS file seperation.

7

To be honest, that separation was for sending the code to Chat-GPT easier.

I would appreciate your help too. This is a big problem for me.

Than you so much. Best wishes.

8

I have a question ,Do you care at all if I use the source code, to make my own Portfolio.

9

To be honest, not at all:) If you fix it, you also contributed to it.
Please feel free to use it.

10

I threw the css part into VScode, just to see because codepen doesn’t provide a console, so. Here’s the error I got 10 times.

image
image501×175 6.55 KB

11

I do not think that this is the problem as it is solely about the .css spacing.

12

No it brings me to this part of the code, when clicked on

 -webkit-background-clip: text;
13

So I fixed the spacing with the border, I’m still working on the nav bar, It honestly might be a height thing, or padding, ok so I got it scrollable by adding the code to the div that has the about me section. The about me section when in full page preview in codepen, it actually under the nav bar.

style="overflow:scroll; height:400px;"
14

Thank you for your effort, but it makes the about-me div scrollable in itself rather than the general webpage.

15

Hi there. Set the navbar to position: fixed with a defined height and z-index to keep it at the top. Add a margin-top to the content div equal to the navbar’s height to prevent overlap. Ensure body and html allow natural content expansion for proper scrolling.

16

Thanks a lot I will check it out.