Ask coding questions

← Back to all posts
AR199
AR199 (78)

Hi! This is my website. I just want to make the nav section, with the home, about, projects, and contact links better. How would I make it so when you scroll down and the navigation section goes out of sight, the nav bar would now be on the top right section? Please help! Thank you!

Comments
hotnewtop
CodeMaster007 (108)

Hi! Is this what your looking for...

html {
scroll-behavior: smooth;
}

AR199 (78)

@CodeMaster007 No.. What I want is to make it so when I scroll down and can't see the nav bar anymore, the nav bar will automatically go to the top right corner. Kind of like this website:Replit

CodeMaster007 (108)

I’m currently on a ipad and it all looks the same. I’m not sure how it looks on a computer right now but I think this is how it would [email protected]

/ The navigation bar /
.navbar {
position: fixed; / Set the navbar to fixed position /
bottom: 0; / Position the navbar at the bottom of the page /
width: 100%; / Full width /
}

/ Main content /
.main {
margin-bottom: 30px; / Add a bottom margin to avoid content overlay /
}

AR199 (78)

@CodeMaster007 No. What I mean is when I scroll down, the nav bar should appear on the top of the page, like this: Replit

AR199 (78)

First you see the home about projects contact in the middle of the page, then when you scroll down you see the home about projects contact at the top right corner of the page.

CodeMaster007 (108)

I’m not sure I understand right now but when I go on my pc, Ill check it out. :)@AR199

CodeMaster007 (108)

Hi! I'm back at my pc and I written some code. I think I understand what you mean now. So your talking about a fixed navigation bar? @AR199

/ The navigation bar /
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; / Set the navbar to fixed position /
top: 0; / Position the navbar at the top of the page /
width: 100%; / Full width /
}

/ Links inside the navbar /
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/ Change background on mouse-over /
.navbar a:hover {
background: #ddd;
color: black;
}

/ Main content /
.main {
margin-top: 30px; / Add a top margin to avoid content overlay /
}

AR199 (78)

@CodeMaster007 This doesn't appear to make any difference in the navbar.

AR199 (78)

@CodeMaster007 Actually this is perfect! Not exactly what I had in mind, but it'll do. Thank you so much!

AR199 (78)

@AR199 I have one more question. There is too much gray space on the top and bottom of the navbar. How would I remove that? I want the navbar to be on the very top of the website.

CodeMaster007 (108)

What about this for the size? @AR199

html{background:gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}

[deleted]

@AR199 I’m looking for people, we’re making a chat app, do you have any skills to contribute? If you want to join?

AR199 (78)

@TestOP Sure! I'd be happy to join. What skills would you need?

[deleted]

@AR199 css html, and some js

AR199 (78)

@TestOP OK cool. Send me the link.