Update: I managed to get desktop working. Just need to sort out mobile now.
The issue I am having is that the dropdown does not seem to work properly on mobile/desktop. And styling wise it is also fine/good as far as desktop/mobile goes. But the problem is functionality. I put in some placeholder links in the dropdown items (to see if that would make them appear) and this is not the case.
See the menu I am trying to get to work:
<nav id="navbar">
<div >
<img src="[[ url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarScroll">
<ul style="--bs-scroll-height: 100px;">
<li >
<a aria-current="page" href="https://www.google.com">Home</a>
</li>
<li >
<a href="https://www.google.com">About us</a>
</li>
<li >
<a href="https://www.google.com">Contact</a>
</li>
<li >
<a href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul aria-labelledby="navbarScrollingDropdown">
<li><a href="https://www.google.com">Action</a></li>
<li><a href="https://www.google.com">Another action</a></li>
<li><hr ></li>
<li><a href="https://www.google.com">Something else here</a></li>
</ul>
</li>
</ul>
<form role="search">
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
- Also good to note: I can notice the classes shift between collapsed and collapsing and collapse show. But it does not show me any of the items.
Anyone have any idea why the menu is not showing up? Could this be that pre-existing CSS is interfering? (I already checked this to a limited extent as this was my first thought. But I couldn't get it to show the items by disabling some of the obvious ones.) Now I would like to know whether or not I am missing something or I should just dig deeper in my custom CSS.
Also currently unable to get the sticky working on this again (but I managed this before on a simpler bootstrap menu so I will figure that one out. But if someone has some kind of magical piece of advice I am open to it.)
Also see attached my current compiled CSS:
/* MODULES ***************************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Open Sans:wght@400;600;700&display=swap");
/* PARTIALS **************************************************************************************/
.heading-xxl {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 40px;
line-height: 48px;
}
.heading-xl {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 34px;
line-height: 38px;
}
.heading-l {
font-family: "Bree Serif", serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
.heading-m {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
.heading-s {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.heading-xs {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.font-text-l {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
}
.font-text-m {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.font-text-s {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 21px;
}
.heading-xxl.color-here {
color: #07BE54;
}
.heading-xxl.color-here {
color: #949BFF;
}
.heading-xxl.color-here {
color: #FF965A;
}
.heading-xxl.color-here {
color: #25DC71;
}
.heading-xxl.color-here {
color: #125C30;
}
.heading-xl.color-here {
color: #07BE54;
}
.heading-xl.color-here {
color: #949BFF;
}
.heading-xl.color-here {
color: #FF965A;
}
.heading-xl.color-here {
color: #25DC71;
}
.heading-xl.color-here {
color: #125C30;
}
html {
background-color: #1e4785;
}
@media print, screen and (max-width: 63.99875em) {
html {
max-width: 100%;
}
}
.content {
max-width: 70%;
}
.gradient-line-transparant {
background: linear-gradient(to right, rgb(30, 71, 133), rgb(246, 255, 255), rgb(246, 255, 255), rgb(30, 71, 133));
}
.logo {
max-width: auto;
max-height: auto;
}
.logo.center {
display: flex;
margin-left: auto;
margin-right: auto;
height: auto;
width: 100%;
padding-top: 28px;
}
.logo.chinook {
align-self: center;
}
.photo {
max-width: auto;
max-height: auto;
}
@media print, screen and (max-width: 63.99875em) {
.photo {
max-width: 70%;
max-height: auto;
}
}
.photo.left {
float: left;
margin-right: 20px;
}
.photo.right {
float: right;
}
div h1 {
font-size: 40px;
color: #1e4785;
text-align: center;
margin-top: 0;
}
@media print, screen and (max-width: 63.99875em) {
div h1 {
font-size: 0.9em;
align-self: center;
}
}
div h2, div h3, div h4, div h5 {
color: #1e4785;
text-align: center;
margin-top: 0;
}
div p {
width: 100%;
}
p, li, ul, u, i {
color: #1e4785;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
a {
color: #f89830; /*Dutch Orange*/
}
iframe.discord {
width: 425px;
height: 500px;
}
@media print, screen and (max-width: 63.99875em) {
iframe {
width: 225px;
height: 300px;
float: left;
}
}
.gametracker {
float: right;
}
li {
display: inline;
margin-left: 100px;
align-items: center;
}
a {
color: #f89830; /*Dutch Orange*/
}
a:hover {
color: #f89830;
opacity: 0.75;
}
/* ---------------------Sticky Nav Styling--------------------- */
/* Style the navbar */
#navbar {
overflow: hidden;
padding: 0 0 0 0;
background-color: #1e4785;
height: 10vh;
}
.navbar-brand {
width: 95px;
height: 95px;
}
.container {
--bs-gutter-x: 0;
}
.container .menu {
padding: 0 0 0 0;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f89830;
text-align: center;
text-decoration: none;
height: 3vh;
}
@media print, screen and (max-width: 63.99875em) {
#navbar a {
font-size: 12px;
margin-top: 17px;
}
}
#navbar a.home {
margin-left: 5em;
}
@media print, screen and (max-width: 63.99875em) {
#navbar a.home {
margin-left: 1em;
}
}
#navbar a.about {
padding-left: 50px;
}
#navbar a.contact {
padding-left: 50px;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
height: 5vh;
width: 100%;
background-color: #1e4785;
margin-top: -0.5em;
z-index: 99999;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky .content {
padding-top: 60px;
}
/*header closing tag*/
footer {
text-align: center;
}
footerli, footer ul, footer u, footer i {
color: #1e4785;
font-size: 20px;
text-align: center;
}
footerh1, footer h2, footer h3, footer h4, footer h5 {
color: #1e4785;
text-align: center;
}
footer a, footer a:hover {
background-color: #1e4785;
color: #f89830; /*Dutch Orange*/
text-align: center;
}
footer p.col-md {
background-color: #1e4785;
color: #f7ffff;
font-size: 18px;
margin-bottom: 0;
}
section {
align-self: center;
}
section div {
text-align: center;
}
section div p {
font-weight: normal;
}
/*---------------Button styling below---------------*/
.button-primary {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono", monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow 0.15s, transform 0.15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow, transform;
font-size: 18px;
}
.button-primary:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.button-primary:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-primary:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
body {
background-color: #1e4785;
}
@media print, screen and (max-width: 63.99875em) {
.col-md {
font-size: 35px;
}
}
/* JAVASCRIPT *************************************************************************************/
/* FOUNDATION IMPORTS*/
html {
visibility: visible;
}
/*# sourceMappingURL=style.css.map */
CodePudding user response：
Are you including the linked js for it? https://getbootstrap.com/docs/5.0/components/dropdowns/
CodePudding user response：
In collapsed mode (mobile), the hamburguer icon functionality depends on the required javascript bundle to be included. For instance, https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js. Also, in your markup, you have a loose . Probably it came from copying from the examples in bootstrap's website.
See the following working code.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<nav id="navbar" >
<div >
<a href="#"><img src="[[ url_images]]/logos/logo.jpg" alt="Your image is not loading"></a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarScroll">
<ul >
<li >
<a aria-current="page" href="https://www.google.com">Home</a>
</li>
<li >
<a href="https://www.google.com">About us</a>
</li>
<li >
<a href="https://www.google.com">Contact</a>
</li>
<li >
<a href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul aria-labelledby="navbarScrollingDropdown">
<li><a href="https://www.google.com">Action</a></li>
<li><a href="https://www.google.com">Another action</a></li>
<li>
<hr >
</li>
<li><a href="https://www.google.com">Something else here</a></li>
</ul>
</li>
</ul>
<form role="search">
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>