So as the title says. I am working on a school project. where we want to make responsive webdesign.
I have nearly made our groups goal but I have one last problem that I hoped Stackoverflow can help me resolve
So in bootstrap 5. we want to make so when we are on small devices a Burger menu will show up. and show our navbar. but it seems that when I click on the Burgermenu it will spread instead of dropdown. and the result of that is that our dropdown manu, and the close function, is hidden uppon the website-window.
HTML/Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Montserrat:wght@100&family=Roboto+Slab:wght@100&family=Syne:wght@600&display=swap');
</style>
<meta name="robots" content="noindex">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Home</title>
</head>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<body>
<header>
<img class="logo" src="img/logo/LOB-logo.svg" alt="LOBLogo" width="75" height="75">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<!-- Burgermenu på små skærme -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<!-- brugerdefinerede Burgermenu ikon -->
<img src="img/content/icons/burger-menu-1.svg" alt="Burger Menu" width="40" height="40" />
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Dropdown-menu -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
DISCIPLINER
</a>
<!-- Links i dropdownmanuen -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="fodbold.html">Fodbold</a></li>
<li><a class="dropdown-item" href="#">Badminton</a></li>
<li><a class="dropdown-item" href="#">Løb</a></li>
<li><a class="dropdown-item" href="#">Vollyball</a></li>
<li><a class="dropdown-item" href="#">Fitness</a></li>
</ul>
</li>
<!-- De andre links i navbaren -->
<li class="nav-item">
<a class="nav-link" href="fodbold.html">LOBBYEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fodbold.html">ARRANGEMENTER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fodbold.html">GALLERI</a>
</li>
<li class="nav-item">
<a class="nav-link signup" href="tilmelding.html">Tilmeld Dig</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fodbold.html">KONTAKT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Indhold her -->
<h1>Opgave for morgenmøde</h1>
<p>Jimmi</p>
</div>
</div>
</div>
<footer>Dette site er til undervisningsbrug</footer>
</body>
</html>
CSS:
/* Denne fil er redigeret af ChatGPT
https://chat.openai.com/share/0db9a9ce-5456-4e02-afcc-97845b4f3c6c */
@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Montserrat:wght@100&family=Roboto+Slab:wght@100&family=Syne:wght@600&display=swap');
/* Nulstil margin og padding, og sæt font-family */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
/* Sørg for, at body og html fylder hele skærmen */
html, body {
height: 100%;
}
/* Fjern default margin på body */
body {
margin: 0;
}
/* Stil for header-elementet */
header {
background-color: #171d18;
width: 100%;
height: 100px; /* Juster efter behov */
color: #f9fbf3; /* Tekstfarve til kontrast */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px; /* Tilføjer lidt polstring til venstre og højre for indholdet */
}
/* Tilpas farven på navbaren */
nav.navbar {
background-color: #171d18 !important; /* Baggrundsfarven på navbaren */
}
/* Tilpas farven på teksten i navbaren */
nav.navbar a {
color: #f9fbf3; /* Farven på teksten i navbaren */
}
/* Ændr baggrundsfarven på burger-menu-knappen til sort */
.navbar-toggler {
background-color: #171d18; /* Sort baggrundsfarve */
border: none; /* Fjern kantlinje */
}
/* Juster padding til venstre for at give plads til logoet */
nav {
padding-left: 20px; /* Juster efter behov */
}
/* Tilpasninger til logo og navigation */
nav {
display: flex;
font-weight: bold; /* Gør skriften fed */
justify-content: flex-start;
align-items: right;
}
/* Tilpasninger til navigationselementer */
nav a {
margin: 0 10px;
color: #f9fbf3;
text-decoration: none;
}
/* Fjern hover-effekten for farven på navigationselementerne */
nav a:hover {
color: inherit !important; /* Behold samme farve ved hover */
text-decoration: none; /* Fjern understregning ved hover */
}
/* Tilpas farven på Tilmeld Dig-linket */
nav a.signup {
background-color: #ffffff; /* Hvid baggrundsfarve */
padding: 5px 10px; /* Juster polstring efter behov */
color: #171d18; /* Tekstfarve */
text-decoration: none;
display: flex; /* Aktiverer Flexbox */
align-items: center; /* Centrer lodret */
justify-content: center; /* Centrer vandret */
}
/* Tilpas farven på dropdown-menu */
.dropdown-menu {
background-color: #171d18 !important; /* Behold samme farve som baggrundsfarven */
border: 1px solid #3d4246;
max-height: 200px;
z-index: 1000;
width: auto; /* eller en bestemt bredde efter behov */
max-width: none; /* eller en bestemt maksimal bredde efter behov */
position: absolute !important;
}
/* Tilpas farven på dropdown-menu-indhold */
.dropdown-menu a {
color: #f9fbf3 !important; /* Farven på teksten i dropdown-menu */
font-weight: bold;
margin: 0;
padding: 0;
padding-left: 10px; /* Tilføj padding til venstre (juster efter behov) */
}
/* Fjern hover-effekten for farven på dropdown-menu-indholdet */
.dropdown-menu a:hover {
color: inherit !important; /* Behold samme farve ved hover */
text-decoration: none; /* Fjern understregning ved hover */
margin: 0;
padding: 0;
padding-left: 10px; /* Tilføj padding til venstre ved hover (juster efter behov) */
}
.container-fluid {
display: flex;
justify-content: space-between;
}
/* Tilpasninger til logo */
.logo {
margin-right: 10px; /* Juster efter behov */
}
/* Tilpasninger til navigationselementer */
nav a {
margin: 0 10px;
color: #f9fbf3;
text-decoration: none;
}
/* Stil for footer-elementet */
footer {
text-align: center;
padding: 10px;
background-color: #171d18;
color: white;
}
Yea btw sorry that the comments isn’t english but danish.
We have tried to speak with
ChatGPT, that have given us alot of poseble, changes, but 9/10 times it does nothing.
The last 1 it destroy our structur, and the dropdown function from a lg screen.
We have tried to search the internet for answers without luck.
We have tried to ask friends but since we are working with Webdesign and they are not they haven’t been to much help.
We had hoped for that the burger menu after some changes to it would perform as intendet but no breakthrough yet. I have an idea tho. and thats that the dropdown menu perhaps are the reason why it happens somehow.
2
Answers
I want to share what we did to fix it. should another stay with the same problem.
The solution was to add CSS to just move the menu from the Burgermenu. Now it works wonderful
Here is what CSS we have used `
`The post is not in need of staying open anymore
You need to use position CSS on Dropdown Menu