Navbar help

Question

Hi guys, I have been looking at 4 different methods of creating a navbar (all completely different!) But they either make no sense, are messy or just dont work correctly. I just want a logic method that uses a separate css style sheet and works effectively. Anyone got any thoughts? Thanks.

Answer 1

This one has a external style sheet and is simple.

https://code.sololearn.com/WZeW9v9Ei9Ge/?ref=app

Answer 2

Take look at this. It is a css responsive navbar menu

https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793

https://code.sololearn.com/W4wGEXDExdBA/?ref=app

https://code.sololearn.com/WeyZyBFzxE7n/?ref=app

Answer 3

Those are nice, It'll take me a while to unpick those and figure out how they work! The layout is very tidy though which helps, thank you!

Answer 4

These are all simpler with external stylesheets.

https://codetheweb.blog/2017/12/12/style-a-navigation-bar-css/

 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

 https://www.tutorialspoint.com/Create-a-Horizontal-Navigation-Bar-with-CSS

 https://www.washington.edu/accesscomputing/webd2/student/unit3/module6/lesson2.html

 https://www.webucator.com/how-to/how-create-horizontal-navigation-menu-with-css.cfm

 https://css-snippets.com/simple-horizontal-navigation/

 https://www.w3schools.com/w3css/w3css_navigation.asp

 https://www.w3schools.com/css/css_navbar.asp

 https://codetheweb.blog/2017/12/12/style-a-navigation-bar-css/

Answer 5

That's great, thanks for all the links. The responsive menu is a great example to reverse engineer

Answer 6

That's interesting, I hadn't realised that difference.

Answer 7

I'll look into anchor tags that sounds very versatile. Thanks for that I'll get researching. One last thing, which part of the box is the best way to centralize the text in the box?

Answer 8

My opinion: Include Bootstrap files , go to the official bootstrap site and search for navbar, copy the code and modify it as you wish. That's how I did in
https://code.sololearn.com/Win25h47mQ0j/?ref=app
https://code.sololearn.com/W0icwnGeJ52O/?ref=app

😁😊😅

Answer 9

That's a very good thought I have definitely looked into bootstrap however I am trying to get a good foundation making them from scratch