Skip to main content
E
Eric5E52
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
    davidhelp
    Inspiring
    June 10, 2021

    Here are some help links.

     

    CSS Horizontal Navigation Bar
    https://www.w3schools.com/css/css_navbar_horizontal.asp


    CSS Navigation Bar
    https://www.w3schools.com/css/css_navbar.asp


    How TO - Vertical Menu
    https://www.w3schools.com/howto/howto_css_vertical_menu.asp


    CSS Vertical Navigation Bar
    https://www.w3schools.com/css/css_navbar_vertical.asp

     

    A big variety of menus

    https://www.jotform.com/blog/100-great-css-menu-tutorials/

     

    Mobile Navigation Bar
    https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

     

    Create A Responsive Topnav with Dropdown
    https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

     

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity 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
    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
    Nancy OSheaCommunity 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices