Skip to main content
Participant
June 8, 2021
Question

navigation bar

  • June 8, 2021
  • 2 replies
  • 713 views

How can i put a navigation bar? And what it is?

 

    This topic has been closed for replies.

    2 replies

    davidhelp
    Inspiring
    June 10, 2021
    Nancy OShea
    Community Expert
    Community Expert
    June 10, 2021

    What no interactive hamburger icon for mobile devices? 

     

    Bootstrap's Navbar component contains a built-in interactive hamburger.

    From DW CC 2021, simply go to Insert > Bootstrap Components > Navbar.

     

    Animated GIF of Bootstrap's Navbar with Search:

     

     

    Working code:

    <!doctype html>
    <html lang="en">
    <head>
    <title>Bootstrap 4.5 Starter Page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
    <style>
    /**Some Custom Styles for Demo Purposes**/
    .container-fluid {
    min-height: 900px;
    background: url(https://placeimg.com/1500/900/nature) no-repeat center center fixed;
    background-size:cover;
    }
    .opacity-3 {background:rgba(0,0,0,0.6)!important;}
    </style>
    </head>
    
    <body class="pt-5">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"><a class="navbar-brand" href="#">Brand/Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Sub-menu 1</a> <a class="dropdown-item" href="#">Sub-menu 2</a> <a class="dropdown-item" href="#">Sub-menu 3</a> </div>
    </li>
    </ul>
    <!--Optional Google searchbox script goes here-->
    <!--Add Google searchbox div here-->
    </div>
    </nav>
    
    <!--MAIN CONTENT-->
    <main class="container-fluid">
    <div class="row">
    <div class="col-md-8 mx-auto  opacity-3 text-light mt-5">
    <h3 class="m-1 p-4">Bootstrap 4.5 in Dreamweaver</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis molestiae veniam ab doloremque illum amet sint, iure labore magni aspernatur architecto eligendi consectetur hic maxime reprehenderit nesciunt similique saepe odio.</p>
    </div>
    </div>
    </main>
    
    <!--Supporting Scripts-->
    <!--First jQuery then Popper then Bootstrap JS--> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
    </html>

     

    Bootstrap Documentation:

    https://getbootstrap.com/docs/4.5/components/navbar/

     

    Nancy O'Shea— Product User & Community Expert
    Liam Dilley
    Inspiring
    June 15, 2021

    That would be your bare minimum from Nancy and you can take it as far as you like...

    https://codepen.io/kevinpowell/pen/PWNwZm

    Nancy OShea
    Community Expert
    Community Expert
    June 8, 2021

    This is an extremely basic question and one which should be obvious to anyone who uses the Internet.  Navigation allows site visitors to reach other pages on your domain.  

     

    As an example, your site's navigation might look something like:

    HOME    |   SERVICES    |   PRODUCTS    |  CONTACT US

     

    In order to build websites, you need a working knowledge of HTML, CSS and to some extent JavaScript code. Without understanding code, it's unlikely you'll get the results you're hoping for. Use the links below.  Read chapters, do code exercises and take quizzes at the end.
    - https://www.w3schools.com/html/
    - https://www.w3schools.com/css/
    - https://www.w3schools.com/js/

     

    Nancy O'Shea— Product User & Community Expert