Mitchell Watson
Reputation: 41
Whole Navbar Expands With Dropdown
I am trying to create a custom breakpoint for my navbar so that it changes to a hamburger menu at 1080px. However the entire navbar expands when I click on a dropdown.
@media (min-width: 1080px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
HTML
<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
<a class="navbar-brand" href="#">
<img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav nav-item " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cameras and Weather
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">BOM Links</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="http://www.bom.gov.au/products/IDR503.loop.shtml#skip" target="_blank">Live Rain Radar</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/msl_36hr_forecast.shtml" target="_blank">Weather Chart Current</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/4day_col.shtml" target="_blank">4 Day Chart</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/jsp/watl/rainfall/pme.jsp" target="_blank">Rain Prognosis</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/watl/wind/forecast.shtml?unit=p0&location=qld2&tz=AEDT" target="_blank">Wind Prognosis</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/aviation/charts/grid-point-forecasts/#" target="_blank">Grid Point Wind</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/aviation/forecasts/arfor/" target="_blank">Area 40 Forecast</a>
</ul>
</li>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="camera link.html">Clifton Airfield Cameras</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL1471" target="_blank">Clifton Weather Station</a>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Cameras</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="http://www.airservicesaustralia.com/WeatherCam/default.html" target="_blank">Toowoomba & Archerfield</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.warwickgliding.org.au/index.php/about/webcam" target="_blank">Warwick</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.skycam.net.au/" target="_blank">Skycam Cameras</a>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Weather Stations</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=ITOOWOOM10" target="_blank">Toowoomba</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IOAKEY2" target="_blank">Oakey</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL673" target="_blank">Dalby</a>
</ul>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.airservicesaustralia.com/aip/current/ersa/FAC_YCFN_24MAY2018.pdf" target="_blank">Clifton ERSA Entry</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flying Scholarship</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="2018 Winner.html">2018 Winner</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Scholarship Photos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Previous Winners</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Photos & Videos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Photos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Videos</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Events/What's New</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1940's Ball</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Wellcamp Fly-In</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.forums.loneeagleflyingschool.org.au/index.php?action=calendar" target="_blank">Club Calender</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flight Training & FAQ's</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Flight Training</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="FAQ's.html">FAQ's</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Club History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">John Bange History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">About The Airfield</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Trophies</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link nav" href="#">Local Attractions</a>
</li>
<li class="nav-item">
<a class="nav-link nav" href="contact us.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav" href="https://forums.loneeagleflyingschool.org.au/" target="_blank">Club Documents</a>
</li>
</ul>
</div>
</nav>
When I take use the .navbar-expand-lg it works fine but as soon as I tell it to use the .navbar-expand-custom tag it stops working properly. However, the breakpoint works correctly.
Upvotes: 2
Views: 3471
Answers (1)
Charu Maheshwari
Reputation: 1643
Try to use below code snippet. Actually issue is you want dropdown to take space below 1080px but above 1080px you want it to be absolute, so that navbar doesn't get expanded.
@media (min-width: 1080px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
.navbar-expand-custom .navbar-nav .dropdown-menu {
position:absolute;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
<a class="navbar-brand" href="#">
<img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav nav-item " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cameras and Weather
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">BOM Links</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="http://www.bom.gov.au/products/IDR503.loop.shtml#skip" target="_blank">Live Rain Radar</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/msl_36hr_forecast.shtml" target="_blank">Weather Chart Current</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/australia/charts/4day_col.shtml" target="_blank">4 Day Chart</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/jsp/watl/rainfall/pme.jsp" target="_blank">Rain Prognosis</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/watl/wind/forecast.shtml?unit=p0&location=qld2&tz=AEDT" target="_blank">Wind Prognosis</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/aviation/charts/grid-point-forecasts/#" target="_blank">Grid Point Wind</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.bom.gov.au/aviation/forecasts/arfor/" target="_blank">Area 40 Forecast</a>
</ul>
</li>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="camera link.html">Clifton Airfield Cameras</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL1471" target="_blank">Clifton Weather Station</a>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Cameras</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="http://www.airservicesaustralia.com/WeatherCam/default.html" target="_blank">Toowoomba & Archerfield</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.warwickgliding.org.au/index.php/about/webcam" target="_blank">Warwick</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.skycam.net.au/" target="_blank">Skycam Cameras</a>
</ul>
</li>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Other Weather Stations</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=ITOOWOOM10" target="_blank">Toowoomba</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IOAKEY2" target="_blank">Oakey</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.wunderground.com/personal-weather-station/dashboard?ID=IQUEENSL673" target="_blank">Dalby</a>
</ul>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.airservicesaustralia.com/aip/current/ersa/FAC_YCFN_24MAY2018.pdf" target="_blank">Clifton ERSA Entry</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flying Scholarship</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="2018 Winner.html">2018 Winner</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Scholarship Photos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Previous Winners</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Photos & Videos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Photos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Videos</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Events/What's New</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1940's Ball</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Wellcamp Fly-In</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.forums.loneeagleflyingschool.org.au/index.php?action=calendar" target="_blank">Club Calender</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flight Training & FAQ's</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Flight Training</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="FAQ's.html">FAQ's</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Club History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">John Bange History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">About The Airfield</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Trophies</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link nav" href="#">Local Attractions</a>
</li>
<li class="nav-item">
<a class="nav-link nav" href="contact us.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav" href="https://forums.loneeagleflyingschool.org.au/" target="_blank">Club Documents</a>
</li>
</ul>
</div>
</nav>Upvotes: 2
Related Questions
- Bootstrap Navbar Dropdown Goes Off Screen
- Dropdown shows inside navbar
- Prevent dropdown list in collapsed bootstrap4 navbar from expanding the navbar
- How to prevent Navbar dropdown from overlapping with rest of the content?
- How can I make my Bootstrap 4 navbar dropdown full width?
- Bootstrap 4 dropdown opens in navbar and increases the navbar height
- Boostrap 4 non collapsible items drop down is expanding the Navbar
- Customize Bootstrap Navbar dropdown destroying the design when screen is small
- Multi- level dropdown using BootStrap-4 navbar goes out of screen when dropsdown
- navbar dropdown causing page width to extend