Skip to main content
This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 13, 2022

Or save time and use Bootstrap responsive framework for your project.

In DW CC, go to Insert > Bootstrap Components > Navbar...  pick one.

 

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
March 13, 2022
quote

Or save time and use Bootstrap responsive framework for your project.

In DW CC, go to Insert > Bootstrap Components > Navbar...  pick one.

 

By @Nancy OShea

 

I've never seen a default vertical desktop version of the Bootstrap nav component so I doubt it will save anytime as you would have to re-engineer the css code to make it happen or Google to find a solution.

 

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 13, 2022

By default, Bootstrap is a mobile-first framework.  As such all menus are vertically stacked out of the box until they are viewed on wider viewports. 

 

In Bootstrap 5, you can choose when to expand (.navbar-expand-md or .navbar-expand-lg) or remove the expand class entirely as I have done here.  No CSS editing needed.

 

 

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

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar bg-dark navbar-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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-md-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on all screens and replaced by a button in the top right corner.</p>
<p>When button is clicked, the navigation bar will open to reveal vertically stacked links.</p>
</div>
</div>
</div>
</body>
</html>

 

I think it saves a lot of time. 😀

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
March 13, 2022

Are you wanting to make a drop down menu for tablet and smartphone so the current menu takes up less real estate when the page loads?

 

If so add the css below AFTER your 'nav' css selector which is near the start of your css styles - (4th in the list)

 

 

nav ul {
display: none;
}

.mobileMenuIcon {
display: block;
cursor: pointer;
}

@media screen and (min-width: 768px) {

nav ul {
display: block;
}
.mobileMenuIcon {
display: none;
}
}
.showHide {
display: block;
}

 

Replace the text and add the 'mobileMenuIcon' class to the <p> tag which is directly above your starting <ul> tag for your menu code:

 

<p class="center mobileMenuIcon">Mobile Menu Icon</p>

 

 

Then add the below javascript to the end of your pages code, directly above the closing </html> tag:

 

<script>
const mobileMenuIcon = document.querySelector('.mobileMenuIcon');
const navUl = document.querySelector('nav ul');
mobileMenuIcon.onclick = function() {
navUl.classList.toggle('showHide');
}
</script>

 

 

 

That will give you a basic drop down menu for tablet and smartphone devices if you click on the text 'Mobile Menu Icon'. You can replace the text with a hamburger icon from font awesome (an icon library) or an image. You can also hide the text 'Nav Menu' and the icon of the little bloke typing if you wish for mobile devices.

 

davidhelp
davidhelpAuthor
Inspiring
March 13, 2022

Thanks to all. I tried the one from Osgood and it looks much better then what I had.

I copied the code that Nancy has from Bootstrap in a separate page to try out as well. I like the navigation along the top for cell phone.

The "Wappler" software looks interesting too but may be too complicated for me as I am not smart  : )

 

 

B i r n o u
B i r n o u
Legend
March 13, 2022

better, yes, but in which directions
- ergonomics
- design
- accessibility
- usability
- code optimization
- loading time
- adaptability
- all ?

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