Skip to main content
S
sllverskyy
Participant
March 20, 2023
Question

Code question - broken menu

  • March 20, 2023
  • 3 replies
  • 230 views

ZIP file: https://drive.google.com/file/d/1GekWtHxHp-WgFZRaCHewhytDuMnNB45K/view?usp=sharing

Hi! I isolated the code in the zip file above to make it simpler to analyze.
On the mobile view (768px width and lower), the drop-down menu does not show, while on the tablet view (768px and above), the menu has the exact same code except for the mobile-view and tablet-view media queries, however, it works. If anyone could look through and help me determine the issue, that would be great! Thank you so much 😄

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 25, 2023

@sllverskyy,

Did you find a solution to your Menu problem?

 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 21, 2023

Responsive menu & layout, working example.

 

Copy & paste this code into a new, blank document. 

<!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">

<!--Minified Bootstrap 5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>

<body>
<!--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="#"><i class="bi bi-house"></i> Home</a>
</li>
<!--Begin Dropmenu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-gear"></i> Dropmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li> <!--end dropmenu-->
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-film"></i> Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-instagram"></i> Instagram</a></li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-facebook"></i> Facebook</a></li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="container mt-3">
<div class="row">
<div class="mt-4 p-5 bg-secondary text-light rounded">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on all small 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 class="row">
<div class="col-lg-4">
<h4 class="mt-3">Bootstrap 5 Tutorials</h4>
<p>https://www.w3schools.com/bootstrap5/index.php</p>

<h4 class="mt-3">Bootstrap Icons Cheat Sheet</h4>
<p>https://diegomariano.com/bootstrap-icons-cheat-sheet/</p>
</div>

<div class="col-lg-4">
<h4 class="mt-3">Music AI Projects</h4>
<p>Google Lab's MusicLM is a Text to Music algorithm. Audio examples below.<br>
https://google-research.github.io/seanet/musiclm/examples/</p>
</div>

<div class="col-lg-4">
<h4 class="mt-3">Music AI Generators</h4>
<ul>
<li>AIVA https://www.aiva.ai/</li>
<li>SOUNDFUL https://soundful.com/</li>
<li>ECRETT MUSIC https://ecrettmusic.com/</li>
<li>SOUNDRAW https://soundraw.io/</li>
<li>BOOMY https://boomy.com/</li>
<li>OPEN AI - MUSENET https://openai.com/blog/musenet/
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<footer class="row bg-dark text-light">
<div class="mt-4 p-4">
<small>Footer<br>XYZ Company  |  1400 5th Ave, NY, NY | Tel: 123-456-7890<br> 
©2023 all rights reserved.</small>
</div>
</footer>
</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>

 

Hope that helps.

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 20, 2023

I prefer not to download and unzip untrusted files to my system.  For quicker help with layout issues, just upload your problem page and dependant files to a TEST folder on your server.  Post the URL here.  We can troubleshoot a site better with our browser's tools.

 

 

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