Skip to main content
D
default0vaokg78cv42
Inspiring
May 31, 2022
Question

responsive, mobile friendly, navbar with hamburger menu

  • May 31, 2022
  • 3 replies
  • 2383 views

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

    This topic has been closed for replies.

    3 replies

    L
    L e n a
    Community Expert
    June 1, 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...

    quote

    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

     

    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 :

     

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

     

     

     

      L
      L e n a
      Community Expert
      June 2, 2022
      quote

      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...

        O
        osgood_
        Brainiac
        June 2, 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.

          Nancy OShea
          Nancy OShea
          Community Expert
          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 &amp; Moderator
            B i r n o u
            B i r n o u
            Community Expert
            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 ?

            Nancy OShea
            Nancy OShea
            Community Expert
            May 31, 2022

            I posted links to TWO Bootstrap tutorial sites.

             

             

            Nancy O'Shea— Product User, Community Expert &amp; Moderator
              L
              L e n a
              Community Expert
              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

                Terms & ConditionsAccessibility statement
                Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices