responsive, mobile friendly, navbar with hamburger menu

Report · May 31, 2022

Is there a video tuturial available for this topic? The videos I see on youtube are either incomplete or they produce incorrect results.

Please advise.

Thanks.

Regards,

Aaron Anderson

Report · May 31, 2022

Although your question is not exclusively about DW, I will try to answer it...

Admittedly there are only three words, but the field they cover is very large... Responsive, Mobile, Hamburger... !!!

I'm afraid there is no single video that is complete on this subject. You need to go for a complete tutorial, like those accessible in Linkedin, Linda.com, tutos.com and many others...

However, here are some things to think about:

Just there is matter for debate... should we load all the contents and hide them, even if it means eating bandwidth, or should we only take into account the screen dimensions or the intrinsic qualities of the screen, or even the bandwidth levels of the network used... in short, this is vast...

while remaining based only on the screen... check out these URLs

The links do not respect a hierarchical order of importance... they are indicated randomly

The images must also be able to meet the requirements of each device's screen

But technique is not everything... there are also approaches... especially mobile first... what about it?...; and should we be Progressive Enhancement or Graceful Degradation... see on this subject the article

https://www.linkedin.com/pulse/why-responsive-websites-just-simple-step-website-birnou-s%C3%A9barte/

or https://rapidlab.io/blog-en/mobile-first-pros-cons-use-cases/

The menus as for them are reduced in hamburger... there again two axes of answer... the icon itself and its possible animation, but also the mechanical management of this switch... and then why switch, why not preserve this type of menu whatever the device? Here again a vast debate

Well, doing all the above doesn't mean that your page will be mobile friendly

Does your page adapted to mobile… plenty tools out there

first of all testing it https://search.google.com/test/mobile-friendly

Then, some reads

Can this answer help you to start in a more serene way?

I agree that is not video, but again the subject is too vast and opens so many doors to fit in a single Youtube

Report · May 31, 2022

SHORT ANSWER: Use Bootstrap.

Bootstrap contains a built-in navbar component that does all that out of the box.

This example uses Bootstrap 5.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<!--navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link4</a></li>
</ul>
</div>
</div>
</nav><!--/nav-->

<div class="container mt-3">
<div class="row">
<div class="col-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner. When button is tapped/clicked, navigation bar opens to reveal vertically stacked links.</p>
</div>
</div>
</div>
<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Resources:

https://www.w3schools.com/bootstrap5/

https://getbootstrap.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 31, 2022

I tought the question was about a tutorial for responsive, mobile friendly, hamburger... and so on... Bootstrap is a tool isn't it ?

Report · May 31, 2022

I posted links to TWO Bootstrap tutorial sites.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 31, 2022

I agree but that explains how Bootstrap works, not the mecanism of Responsive , Mobile Friendly, and Hamburger... it's just how Bootstrap use them

Report · May 31, 2022

Chances are the OP doesn't know what questions to ask or what Bootstrap is capable of doing out of the box.

I offered an alternate solution that doesn't require reading lengthy coding tutorials or relying on un-tested YouTube videos that may or may not work. The Bootstrap code I posted works!

If you wish to approach this a different way, please be my guest. I look forward to seeing your detailed tutorial. 😁

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 01, 2022

I wouldn't mind learning the coding. I already have, to some degree. A quickfix like bootstrap would be good for the time being. thank you.

Report · May 31, 2022

you probably will have to use a translator, but here they are... well, I should complete, but they are at least bascis

https://www.puce-et-media.com/category/affichage-et-visuel/responsive-web-design/

Report · May 31, 2022

I think this OP just wants a simple 'navigation bar' tutorial/solution that is responsive/mobile friendly. That's how I read it anyway, rather than the bible covering responsive/mobile friendly and a nav with a hamburger.

Report · Jun 01, 2022

actually @osgood_ , you are probably right, I think my frenglish is not yet well attenuated, and twists the interpretations I have of the questions and answers asked on this forum.

in that case... in addition to what i said earlier about the hamburger menu...

The menus as for them are reduced in hamburger... there again two axes of answer... the icon itself and its possible animation, but also the mechanical management of this switch... and then why switch, why not preserve this type of menu whatever the device? Here again a vast debate

https://css-tricks.com/snippets/svg/svg-hamburger-menu/

https://css-tricks.com/hamburger-menu-with-a-side-of-react-hooks-and-styled-components/

https://css-tricks.com/line-animated-hamburger-menu/

https://css-tricks.com/three-line-menu-navicon/

https://alvarotrigo.com/blog/hamburger-menu-css/

https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0

https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/

By @L e n a

@default0vaokg78cv42 this video from codefoxx, concerning hamburger menu, is quite interesting

https://www.youtube.com/watch?v=flItyHiDm7E

well, depending of your code knowledge, it is probably necessary to supplement , by a better explanation of some concepts used in the video, as :

flex which is not detailed, by supplementing by https://css-tricks.com/snippets/css/a-guide-to-flexbox/ easiest to use as a cheat sheet
as well as the use of arrows functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions idem as above

the rest is classic HTML structure, basic CSS properties, and finally plain vanilla javascript, using listener and loop

Report · Jun 01, 2022

Real coders are a rare occurrence in this space.

The average DW user is not seeking to become a career developer. Most are part -time amateurs & hobbyists who just want quick and easy, menu clicks or copy & paste code solutions. Unless they ask to be schooled on the subject, I try to keep things as simple as possible.

Too much information leads to overload. I think that's why leading online academies tell instructors to limit content to 10 minute segments. Mini-bites engage viewers without causing brain freeze.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 02, 2022

Too much information leads to overload. I think that's why leading online academies tell instructors to limit content to 10 minute segments.

By @Nancy OShea

Following your recommendations, it is true that my advice to @default0vaokg78cv42 to watch this video https://www.youtube.com/watch?v=flItyHiDm7E, could have been interesting, but I realize that it is probably too long since it lasts twelve minutes...

Report · Jun 02, 2022

That extra 2 mins will have them running for the exit for sure.

If someone hasnt got the attention span of 12 mins then they are probably already dead.