Ask coding questions

← Back to all posts
How to make a top nav bar
[deleted]

Here is an example

So the circled area is the area where I want the top nav bar and inside the top nav bar is the links. And under the bar is the main scrollable area.
And of course this is NOT my website, it’s for an example..

Answered by codingjlu (227) [earned 5 cycles]
View Answer
Comments
hotnewtop
codingjlu (227)

If you want the easy way, use Bootstrap or w3.css, which have built-in navbar stuff. Learn about how to do w3 at w3schools.

[deleted]

@codingjlu but I looked at all the things in w3schools, it didn’t help me at all...

codingjlu (227)

@Coder2404 See this link: https://www.w3schools.com/w3css/w3css_navigation.asp

Keep in mind you have to include the stylesheet (paste this in the head: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">)
Or you can just ask someone to make you one (I might...)

codingjlu (227)

@Coder2404 Or you can just ask someone to make you one (I might... It's super easy with w3.css)

codingjlu (227)

@Coder2404 After you've included the stylesheet, just try pasting this right under the opening body:

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

This worked when I tried it.
Refer to this link to customize your navbar: https://www.w3schools.com/w3css/w3css_navigation.asp
Works perfectly for me :)

[deleted]

@codingjlu can you help me, I need extra help :p

codingjlu (227)

@Coder2404 Sure, if you give me edit access to your file, I can try (no guarantees though).

[deleted]

@codingjlu just don’t ruin everything..(and I know that I can use the history :p)
But other then that, thanks!

codingjlu (227)

@Coder2404 Okay, which file is the one you want, and can you give me edit access?

[deleted]

@codingjlu technically ALL of them, and sure I’ll give you access, just wait a second...

[deleted]

@codingjlu there you go! I invited you- well I guess I gave you access..

codingjlu (227)

@Coder2404 Hmmm, I don't see it. I requested access to "test".

[deleted]

@codingjlu but I gave you access to “my website”...

[deleted]

@codingjlu wow, it works now, thanks!

[deleted]

@codingjlu um please visit here, I need help and I have some problems...
https://repl.it/talk/ask/Coder2404-There-needs-to-be-enough-cont/123575/456226

[deleted]

@codingjlu thanks for helping me, I will select it as the answer..

codingjlu (227)

@Coder2404 Do you want the navbar on all of your sites? If so, I can probably do them for you if you give me access.

[deleted]

@codingjlu maybe, I’ll think about it..

InvisibleOne (2990)

basically, make a div and then set it's width to 100%, it's hight to like 40px or something, and then set its position to fixed

tussiez (1669)

@InvisibleOne

<div class="navbar">
hello
</div>
.navbar {
width: 100%;
height: 40px;
position: fixed;
}
[deleted]
[deleted]

@tussiez hey, I can’t have more screen time, but talk to you tomorrow!

[deleted]
[deleted]

@tussiez hello, are you done moving?
I think that is personal info I just asked for :p

[deleted]

@tussiez good for you!

[deleted]

@tussiez hey how are you doing?

[deleted]

@tussiez hello, you there?

[deleted]

@tussiez uhh can you help me? Please go here, and sorry for the late reply
https://repl.it/talk/ask/How-to-make-a-scroll-bar/123575

programmeruser (595)

Why are all of your posts being upvoted? This is honestly a bit suspicious...

[deleted]

@programmeruser I don’t know

[deleted]

@Baconman321 nope, sorry

[deleted]

@Baconman321 I need an TOP bar

19wintersp (1142)

@Coder2404 That is a top bar! The second example is!

Baconman321 (1097)

@Coder2404 It's as simple as making a div and placing it at the top like the others are saying...

To achieve this you need to know CSS and html.

[deleted]

@Baconman321 so can you help me...

Baconman321 (1097)

@Coder2404 Do what? Learn CSS?

Codecademy has a great tutorial on learning CSS, I recommend you check it out (it's free, you just have to sign up).

[deleted]

@Baconman321 help me with the nave top bar....

Baconman321 (1097)

@Coder2404 It's as simple as this:
The HTML:

<nav class="navbar">
  <a href="about.html">About me</a>
  <a href="projects.html">My projects</a>
  <a href="facts.html">Cool facts about myself</a>
</nav>

and the CSS:

.navbar
{
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  background-color: black;
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
}
.navbar-container > a
{
  color: white;
  padding: 10px 15px;
}

If you don't like the color or layout you can tweak it a bit.

You should know CSS to at least some extent if you are making a website.

19wintersp (1142)

@Baconman321

.navbar-container

hmm

(and Flexbox > float)

Baconman321 (1097)

@19wintersp True, true...

Oh, yes I forgot to change it to <nav> instead (semantics).

[deleted]

@Baconman321 thanks, I hope it helps

[deleted]

@Baconman321 even though... there is a problem....


....It doesn’t extend completely..and there are no spaces in between the words..

Baconman321 (1097)

@Coder2404
Ah. I've updated the comment I showed to you (the one with the code). Check it.

Also:
日本語知ってる?

[deleted]

@Baconman321 sorry I didn’t respond back sooner but...anyways
はい

[deleted]

@Baconman321 and please update the spaces between the text and the height of the bar, if you can do that...

Baconman321 (1097)

@Coder2404 I'm learning it a bit...
あなたは日本に住んでいますか?

Baconman321 (1097)

@Coder2404 It's as simple as changing the padding.

[deleted]

@19wintersp this really helped thanks but...


There is a problem...when I type to much and you scroll to the right it does this, please fix it....

19wintersp (1142)

@Coder2404 That's your fault; the text ("hshshb...") is one word, and so it won't wrap. If that was actual content, separated with spaces, it would be fine. If you want to force it to break (not necessary), you would set overflow-wrap to anywhere.

Baconman321 (1097)

@Coder2404 Try re-adding the code I posted, I edited it a little. Putting in the div container style overflow-x:hidden; prevents it from overflowing via the x axis (sideways overflow)

[deleted]

@19wintersp how do I do that?

[deleted]

@19wintersp you think so? It’s my fault? Let me try..

19wintersp (1142)

@Baconman321 It doesn't prevent it, it just hides it.

[deleted]

@19wintersp look at my website, you can’t scroll down BUT you can scroll to the right, can you fix it please it’s a problem..

19wintersp (1142)

@Coder2404 It will only scroll down if there is content to scroll!

[deleted]

@19wintersp but then why does it scroll to the right?

19wintersp (1142)

@Coder2404 It doesn't anymore, but it was because there was content overflowing to the right.

[deleted]

@19wintersp so how do I prevent the overflow?

19wintersp (1142)

@Coder2404 I said earlier, and it's already been fixed.

[deleted]

@19wintersp when did you fix it and what did you fix?

19wintersp (1142)

@Coder2404 You fixed it by shortening the text and adding spaces, so it'll wrap.

[deleted]

@19wintersp um go to my website please scroll from side to side that’s a problem...
https://my-website.coder2404.repl.co/

19wintersp (1142)

@Coder2404 It doesn't scroll horizontally.

[deleted]

@19wintersp but it doesn’t scroll vertically either even though there is content

Baconman321 (1097)

@Coder2404 @19wintersp Can u not chat here, (pings REEEEEEE)?

19wintersp (1142)

@Coder2404 Yes, but there isn't enough content to warrant it scrolling vertically: it will only scroll vertically when the content overflows the height of the screen!

19wintersp (1142)

@Baconman321 Sorry lol, where else though?

[deleted]

@Baconman321 then how do me and @19wintersp chat?

Baconman321 (1097)

@19wintersp New comment at the top of the thread?

[deleted]

@19wintersp oh ok but anyway how did it scroll vertically before, I’m confused...🤔

Baconman321 (1097)

@Coder2404 Can u just create a new comment at the top of the post? It's much lighter on my pings (I have other notifs that might get lost).

@19wintersp I ping so u know too.

19wintersp (1142)

@Coder2404 For the third time, it would scroll vertically if there was enough content to overflow the screen vertically! 🙃

[deleted]

@Baconman321 ok then...

[deleted]

@19wintersp I meant how did it scroll HORIZONTALLY before?

19wintersp (1142)

@Coder2404 Same, except there was too much horizontal content. The content overflowed horizontally, and the scrollbar was created.

[deleted]

@19wintersp ohhhh thanks

19wintersp (1142)

Do you have something you've tried already, or do you just want a pointer? Here's one; though the main thing is creating an element, and setting (in CSS) width to 100%, the position to fixed, and top and left to 0.

[deleted]

@19wintersp this is not exactly what I wanted and I don’t want to be mean soo thanks for trying I appreciate it