bootstrap 4 drop down is not showing all the links in dropdown-menu please refer image
its not showing beyond red band , is there something i missing cant figure out that
.red-block{
height: 220px;
background-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
**
So link 3 is not visible , can someone correct this ?
Can u present your full code. Anyways, please try my code and see if it helps. I have replaced your div and anchor to ul - li - anchor structure.
let me know if it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Try adding this in your css.
i dont know this will work inside your html file or not.
.dropdown-menu{
postition: relative;
z-index:-1
}
Sometimes this happens when you try to display an element outside of a container/element that is overflow: hidden
Ex:
.red-block{
overflow: hidden;
background-color: red;
height: 220px;
}
What you could do is 1. Check if any there's any overflow: hidden element and change it or 2. move the .dropdown element right next to the div.red-block like this:
HTML
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<!-- RED BLOCK -->
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
</div>
<!-- END RED BLOCK
DROPDOWN -->
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
<!-- END DROPDOWN -->
CSS
.red-block{
background-color: red;
height: 220px;
}
.dropdown.ml-20{
position: absolute;
bottom: 25%;
}
Hope it helps
Related
details about the questions
...........................................................................................
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<section style="background: aliceblue; width: 100%; height: 100px;" th:fragment="header">
<div class="btn-group">
<a href="http://localhost:8080">
<img src="logo.png" alt="Przejdź do strony głównej" width="80" style="padding: 10px">
</a>
<a style="padding: 20px" class="col-sm" th:href="#{/ordersCatalog}">Zamówienia klientów</a>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-bs-toggle="dropdown" aria-expanded="false">
Klienci
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" th:href="#{/listClient}">Lista klientów</a></li>
<li><a class="dropdown-item" th:href="#{/addClient}">Dodawanie klientów</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2"
data-bs-toggle="dropdown" aria-expanded="false">
Części
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
<li><a class="dropdown-item" href="#{/partsCatalog}">Katalog części</a></li>
<li><a class="dropdown-item" href="#{/addPart}">Dodawanie części do katalogu</a></li>
</ul>
</div>
<div class="btn-group">
<a style="padding: 20px" class="col-sm" th:href="#{/contact}">Kontakt</a>
<a href="http://localhost:8080/cart">
<img src="cart.png" alt="Koszyk" width="80" style="padding: 10px">
</a>
</div>
</section>
<div class="card-footer" style="position:absolute; bottom:0; background: aliceblue; width: 100%; height: 50px; "
th:fragment="footer">
<a href="http://localhost:8080">
<img src="logo.png" alt="Przejdź do strony głównej" width="80">
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Dropdowns don't work. I don't know how to fix it. I want to display one button with dropdowns
Title
Zamówienia klientów
Klienci
Lista klientów
Dodawanie klientów
Lifted from bootstrap docs -
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Add the link above in head of your html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Add the script above on the bottom of <body> before the closing </body> tag
Button dropdown below
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Zamówienia klientów Klienci
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lista klientów</a>
<a class="dropdown-item" href="#">Dodawanie klientów</a>]
</div>
</div>
I'm trying to show a dropdown via JS. Unfortunately it seems like there's a bug in Bootstrap 5.
In this example code, showing the modal works, but showing the dropdown throws an exception: Uncaught TypeError: Cannot read property 'classList' of undefined at _e.show (dropdown.js:140)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>
<div id="testDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div id="testModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let testModal = document.getElementById("testModal");
//new bootstrap.Modal(testModal).show(); //works
let testDropdown = document.getElementById("testDropdown");
new bootstrap.Dropdown(testDropdown).show(); //doesnt work
</script>
</body>
</html>
Am I doing something wrong or is this a bug?
Thanks in advance.
The element should be the dropdown-trigger instead of the parent dropdown...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="testDropdown" type="button" data-bs-toggle="dropdown"> Dropdown button </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Demo
Note: Bootstrap 5 includes a new auto-close option. This must be set to false in order to programmatically trigger the dropdown from outside the dropdown's parent.
I got it working without using a button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="w-75 mt-2">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" placeholder="Search for something">
<button class="btn btn-primary" type="button">Search</button>
</div>
<div class="dropdown">
<div data-bs-toggle="dropdown" id="DROPDOWN_SEARCH"></div>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">Result 1</a>
<a class="dropdown-item" href="#">Result 2</a>
<a class="dropdown-item" href="#">Result 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
let searchDropdown = new bootstrap.Dropdown("#DROPDOWN_SEARCH");
searchDropdown.show();
</script>
</body>
</html>
This my html file. I dont know why in the menu dropdown-menu is always active even when not selected!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
<link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
<style>
.home {
padding: 5rem 0 10rem 0;
background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
background-size: 100% 100%;
margin-top: 3rem;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a:after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home">
<!--- Navigation --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-item">
<a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
</li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End Navigation --->
<!--- Start Landing Page Section --->
<div class="landing">
<div class="row">
</div>
</div>
<!--- End Landing Page Section--->
</div>
<div id="rischio-soci" class="offset">
<div class="home">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<div style="height: 600px" id="drawRischioSoci"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
<div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoAmbiente"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoCompliance"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
My question is how to resolve this problem that you can see in the menu. You can replicate this page by copy paste of the code.
I posted this question 3 days ago but no answer! yet. the javascript code is from another SO answer. link
Here is the image of problem as well.
As you can see "trattamento del riscio" is active (blue) while only mapatura del rischio should be since it's submenu is open!
I have created a modified pills menu system that displays a collapsed structure on small screens and mobile devices. The issue that I am having is that when the 'menu' button is pressed the pill items do not show with a transitional effect has I would expected if they were part of the navigation bar, instead it takes approximately half a second to appear which is not ideal. I assume that the transition works in a relative fashion to the navbar and therefore one would need to slightly alter the method for it to reveal manual hidden elements like I have in my example below:
.xs-collapse {
display: none;
}
body {
background-color: aqua;
}
#media (min-width: 992px) {
.xs-toggle {
display: none;
visibility: hidden;
}
.xs-collapse {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, wasasorld!</title>
</head>
<body>
<div class="container">
<!-- Container start -->
<div class="row">
<!-- row start -->
<div class="col-lg-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light xs-toggle">
<a class="navbar-brand" href="#">
<img src="./images/logo.svg" height="40" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#v-pills-tab" aria-controls="v-pills-tab" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<ul class="nav flex-column nav-pills xs-collapse collapse" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li><a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a></li>
<li><a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a></li>
<li><a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a></li>
<li><a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a></li>
</ul>
</div>
<div class="col-lg-8">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
<!-- row end -->
</div>
<!-- Container end -->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
As you can see the the menu item does not work correctly and any help to resolve this issue would be most appreciated.
many thanks :)
I have only posted the relevant code for you. This will give you a hint into the right direction.
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
<ul class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li><a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a></li>
<li><a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a></li>
<li><a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a></li>
<li><a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a></li>
</ul>
</div>
here is fiddle:
I am currently trying to build a website using bootstrap, it is a very basic website, I am trying to setup the homepage where it has a carousel of images and am having issues setting up the navbar. I can't seem to get a floating centered navbar that includes the logo. I want to use the logo as a href to the homepage and then have a button labeled photos that will have a dropdown menu for the photos and a contact page that will have an anchor section on the homepage. I have worked with bootstrap previously but not to an extent that I feel 100% comfortable. I have managed to make use of various stack overflow forums for my other issues but have been having issues figuring out how to do this.
Below is the gist of my navbar code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.8.5">
<title>blah</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.headerrow {
text-align: center;
padding-top: 5%;
padding-bottom: 5%;
}
img.caro {
width: 140;
height: 140;
}
</style>
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<img src="logo2.png" style="width:8%; height:8%;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="border-radius: 15px; width:100%; height: 600px !important;">
<div class="item active">
<img src="cover.jpg" alt="Cover1" style="width:100%;">
</div>
<div class="item">
<img src="cover2.jpg" alt="Cover2" style="width:100%;">
</div>
<div class="item">
<img src="LogChimneyOut.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace3.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Deck1.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Wall2.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace2.jpg" alt="Cover3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This includes the navbar as well as the carousel image slideshow right below it. I am trying to get a floating center navbar right on top of the carousel that has the logo, pictures button, and contact page. I have looked elsewhere for navbars but the always seem to break the carousel section. I am most certainly not the greatest with HTML or bootstrap but I am trying here. Thanks.
Inside the navbar-nav menu, create a new list item and move the a tag that hold your logo image inside it, and finally replace mr-auto class with mx-auto,align-items-center classes to make all items centered.
<ul class="navbar-nav mx-auto align-items-center">
<li class="nav-item"><img src=".." alt="..">logo</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
Please see here how the flexbox alignment works in BS4
For the dropdown menu button, follow this structure:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown_id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown_id">
<a class="dropdown-item" href="#">Photos</a>
</div>
</li>
Please note that in your snippet you have linked unnecessarily
different versions of Bootstrap files. Follow this introduction
to see how to include Bootstrap properly in your website.
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto align-items-md-center">
<li class="nav-item">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50&text=logo" alt="logo" width="50px" height="50px"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Photo</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//source.unsplash.com/random/1100x400" alt="Los Angeles" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="Chicago" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="New York" width="1100" height="400" class="w-100 h-100">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</main>