Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,575 members, 7,816,415 topics. Date: Friday, 03 May 2024 at 10:49 AM

How Do I Create A Responsive Nav Bar - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How Do I Create A Responsive Nav Bar (809 Views)

How To Can I Create Amazon Aws Account Using Nigerian Cards? / with how Much Can I create An Online Retail Website And APP? / How Do I Create Space Between The Menu(nav) And <h1> - Snapshot (2) (3) (4)

(1) (Reply) (Go Down)

How Do I Create A Responsive Nav Bar by Activity5050: 3:13pm On Jan 29, 2022
Hello senior Developer/Programmers, please am having problem creating a Responsive Navigation bar using html, Css and Javascript. I want it to have three lines on mobile view and to toggle as well.
Re: How Do I Create A Responsive Nav Bar by Tunechi5(m): 3:25pm On Jan 29, 2022
Activity5050:
Hello senior Developer/Programmers, please am having problem creating a Responsive Navigation bar using html, Css and Javascript. I want it to have three lines on mobile view and to toggle as well.
just use bootstrap to avoid unnecessary stress or go to w3school day have a tutorial there
Re: How Do I Create A Responsive Nav Bar by Sapeleboy911(m): 3:40pm On Jan 29, 2022
Use boostrap, though their navbar, navbarnav,navlink, grin grin ; grin navthis and navthat can be very confusing.
Re: How Do I Create A Responsive Nav Bar by bularuz(m): 6:35pm On Jan 29, 2022
Use a css framework preferably bootstrap and save yourself the hassles
Re: How Do I Create A Responsive Nav Bar by niel63(m): 7:47pm On Jan 29, 2022
Simply use Tailwind CSS or bootstrap as suggested above.
Re: How Do I Create A Responsive Nav Bar by thanksjosh005: 11:44pm On Jan 29, 2022
Creating a responsive navbar is nothing short of simple. Are you building a website?
Re: How Do I Create A Responsive Nav Bar by etoluw: 3:43pm On Jan 31, 2022
Activity5050:
Hello senior Developer/Programmers, please am having problem creating a Responsive Navigation bar using html, Css and Javascript. I want it to have three lines on mobile view and to toggle as well.

there are many tutorials online you can follow. but you can send me a message on whatsapp i'll put you through
Re: How Do I Create A Responsive Nav Bar by FanOfMyself: 7:26am On Feb 01, 2022
You see why we have half-baked developers in Nigeria! sad Ordinary responsive navbar almost 90 percent comments suggested bootstrap. Bootstrap framework is cool, but most serious companies would prefer you to build a whole lot of customised components like a navbar. Don't you see that sites built with bootstrap look always similar without much difference?
I even prefer tailwind css because it's a "utility first" framework.

3 Likes

Re: How Do I Create A Responsive Nav Bar by Bobmaintain: 4:13am On Feb 02, 2022
Bootstrap for an ordinary navbar? Is this a joke or what? You all need to go back to your HTML and CSS classes.

Pls set up your html <ul> tag with <li> tags in a <div>. Give the <div> a class name or id, and go to your style.css and manipulate it as you want. But if you are on Reactjs, you know you have to create it as a Component and export it.

Your toggling effect depends on your JS logic...you can set up an onMouseHover function or hideOnClick function or dropDown function in JS using the document.getElementById or document.querySelector , or just go do an a.hover in CSS. It's up to you.
Re: How Do I Create A Responsive Nav Bar by Bobmaintain: 4:36am On Feb 02, 2022
I am so shocked coming here to see that people are suggesting the use of bootstrap for creating an ordinary navbar.

FanOfMyself:
You see why we have half-baked developers in Nigeria! sad Ordinary responsive navbar almost 90 percent comments suggested bootstrap. Bootstrap framework is cool, but most serious companies would prefer you to build a whole lot of customised components like a navbar. Don't you see that sites built with bootstrap look always similar without much difference?
I even prefer tailwind css because it's a "utility first" framework.
Re: How Do I Create A Responsive Nav Bar by Frontend: 4:42am On Feb 02, 2022
HTML
<body>
<div className=container>
<div class=nav>
<ul><li>Home</li>
<li>About us</li>
<li>portfolio</li>
<li>contacts</li>
</ul>
</div></div>
</body>

REACT
import React {useState} from react;
import {Link} from react-router-dom;
export default Navbar (){
return (
<div>
<div className=nav>
<Link to=“/Home">Home</Link>
<Link to=“/About">About</Link>
<Link to=“/portfolio">portfolio</Link>
<Link to=”/contact">contact</Link>
<button onClick=handleClick>fa fa-bars</button>
</div>
<div>
Re: How Do I Create A Responsive Nav Bar by Bobmaintain: 5:31am On Feb 02, 2022
You forgot the a.href="" in the <li> tags.

Frontend:
HTML
<body>
<div className=container>
<div class=nav>
<ul><li>Home</li>
<li>About us</li>
<li>portfolio</li>
<li>contacts</li>
</ul>
</div></div>
</body>

REACT
import React {useState} from react;
import {Link} from react-router-dom;
export default Navbar (){
return (
<div>
<div className=nav>
<Link to=“/Home">Home</Link>
<Link to=“/About">About</Link>
<Link to=“/portfolio">portfolio</Link>
<Link to=”/contact">contact</Link>
<button onClick=handleClick>fa fa-bars</button>
</div>
<div>
Re: How Do I Create A Responsive Nav Bar by Deicide: 6:46am On Feb 02, 2022
Frontend:
HTML
<body>
<div className=container>
<div class=nav>
<ul><li>Home</li>
<li>About us</li>
<li>portfolio</li>
<li>contacts</li>
</ul>
</div></div>
</body>

REACT
import React {useState} from react;
import {Link} from react-router-dom;
export default Navbar (){
return (
<div>
<div className=nav>
<Link to=“/Home">Home</Link>
<Link to=“/About">About</Link>
<Link to=“/portfolio">portfolio</Link>
<Link to=”/contact">contact</Link>
<button onClick=handleClick>fa fa-bars</button>
</div>
<div>
So because of Navbar he should start his project again using React?
Re: How Do I Create A Responsive Nav Bar by alexhale: 6:56am On Feb 02, 2022
This is the best forum I have ever found a thread. find towed car NYC service to avoid any inconvenience.
Re: How Do I Create A Responsive Nav Bar by Bobmaintain: 7:07am On Feb 02, 2022
Except it is a static one page website, the project is pretty useless without a navbar.

Morever he doesn't have to start his project again either in Reactjs or otherwise.
In Reactjs. it will just be a Component, otherwise just a <div>.

Deicide:
So because of Navbar he should start his project again using React?
Re: How Do I Create A Responsive Nav Bar by GeoAfrikana(m): 12:18pm On Feb 02, 2022
Sapeleboy911:
Use boostrap, though their navbar, navbarnav,navlink, grin grin ; grin navthis and navthat can be very confusing.
Just download their examples zip file, copy and paste any side you need and modify it a to your taste/need.

No need to write that annoying thing from scratch.
Re: How Do I Create A Responsive Nav Bar by GeoAfrikana(m): 12:24pm On Feb 02, 2022
FanOfMyself:
You see why we have half-baked developers in Nigeria! sad Ordinary responsive navbar almost 90 percent comments suggested bootstrap. Bootstrap framework is cool, but most serious companies would prefer you to build a whole lot of customised components like a navbar. Don't you see that sites built with bootstrap look always similar without much difference?
I even prefer tailwind css because it's a "utility first" framework.
Firstly, not everyone is a frontend developer.

Secondly, Navbar isn't "ordinary".

Thirdly, bootstrap was made for things like this. Are you saying the folks who wrote it didn't think we'll.

Fourthly, "most serious companies" will hire a frontend specialist if they really want something unique. They won't use a fullstack developer. Frontend design is beyond just knowing CSS and JavaScript. It includes UI/UX.

I can go on to show you why your comment is unwarranted. You can encourage the op to write his code from scratch. Fact remains that, it's not necessary for him to learn how to do it from scratch if he doesn't plan to be a frontend developer.

3 Likes

Re: How Do I Create A Responsive Nav Bar by Bobmaintain: 12:45pm On Feb 02, 2022
Instead of you to calm down and absorb beneficial knowledge, you are busy writing a counter-comment. That's why some of us don't comment here. We will just "breeze in, read and pass".
Cheers!

GeoAfrikana:

Firstly, not everyone is a frontend developer.

Secondly, Navbar isn't "ordinary".

Thirdly, bootstrap was made for things like this. Are you saying the folks who wrote it didn't think we'll.

Fourthly, "most serious companies" will hire a frontend specialist if they really want something unique. They won't use a fullstack developer. Frontend design is beyond just knowing CSS and JavaScript. It includes UI/UX.

I can go on to show you why your comment is unwarranted. You can encourage the op to write his code from scratch. Fact remains that, it's not necessary for him to learn how to do it from scratch if he doesn't plan to be a frontend developer.
Re: How Do I Create A Responsive Nav Bar by GeoAfrikana(m): 1:00pm On Feb 02, 2022
Bobmaintain:
Instead of you to calm down and absorb beneficial knowledge, you are busy writing a counter-comment. That's why some of us don't comment here. We will just "breeze in, read and pass".
Cheers!

And who asked you to comment?
Calm down and absorb which knowledge?
If you have nothing useful to say please move on.

Even FAANG senior developers don't speak with so much bloated ego as you're doing. Empty barrels make the loudest noise.

Simple disagreement you're boasting and pumping like you have written your own operating system.

2 Likes

Re: How Do I Create A Responsive Nav Bar by gistray: 1:43pm On Feb 02, 2022
All those oversabi people up there.


OP there's no issues using Bootstrap because it was created to help build responsive layouts and websites in general.


Those ones telling you to use React this or create from scratch.
They're all stupid and foolish.
Re: How Do I Create A Responsive Nav Bar by Sapeleboy911(m): 7:33pm On Feb 02, 2022
Bobmaintain:
Instead of you to calm down and absorb beneficial knowledge, you are busy writing a counter-comment. That's why some of us don't comment here. We will just "breeze in, read and pass".
Cheers!

You should be the one to calm down here, settle down and read your comments, then read the comments of GeoAfikana. After that tell yourself the truth which of you made more sense? Your comment is filled with ego and pride. You ended up not making any sense. You just dey wrap like say na you found CSS.
Re: How Do I Create A Responsive Nav Bar by FanOfMyself: 9:03pm On Feb 02, 2022
I don't really like arguing with developers here on nairaland because it doesn't yield anything meaningful. OP, building a responsive navbar from scratch is something you should know either as a front-end or full stack developer. It's one of the basic stuffs you learn when taking courses on web development. Now you should try as much as possible to use bootstrap only for utilities like display: flex, margin, padding, positioning etc. If you tow this line, you will standout as a front-end or full stack developer. There's a reason why some Nigerian developers are working for remote companies in America and Europe while others ain't even getting interview invite.
I learnt this from a senior dev.
I also advise devs to become specialist rather than all round devs, though you should know a bit of this and that.
Cheers man.
Re: How Do I Create A Responsive Nav Bar by Frontend: 9:09pm On Feb 02, 2022
Bobmaintain:
You forgot the a.href="" in the <li> tags.


Thanks for the correction I was in a haste I forgot to include <li><a href=#>Home</a></li>
Re: How Do I Create A Responsive Nav Bar by Juliearth(f): 3:22am On May 23, 2022
Bobmaintain:
You forgot the a.href="" in the <li> tags.





Can I be your student

(1) (Reply)

What Is Making You To Dislike Coding? / My Personal Website. / I Make It!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 37
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.