Bootstrap collapsed menu not pushing content down when expanded
I don't know. This seems to work... (kind of a hack though).
.navbar-fixed-top {
top: -70px; /* you'll have to figure out the exact number here */
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative; /* this can also be static */
}
Why is my collapsed navigation menu not pushing content down when expanded?
Removing the height: 50px from .main-nav will allow the content to expand appropriately and push down any content that follows.
Bootstrap 4: Stop collapse from pushing content down
This code should work!
.content {
position: relative;
}
#collapseExample {
position: absolute;
z-index: 1;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="content">Content goes here</div>Default bootstrap navbar doesn't push content down
Don't use position: absolute; top: 0; right:0; height:40px; in your css. That's causing the problem--
see the snippet
.column {
height:100px;
background-color:black;
}
nav{
width:100%;
}
nav .navigatsioon .navbar{
border-radius:0px;
background-color:transparent;
}
nav .navigatsioon .container-fluid{
text-align:center;
}
nav .navigatsioon .navbar.navbar-default{
border-color:transparent;
}
nav .navigatsioon .navbar-default{
}
nav .navigatsioon .navbar-default .navbar-nav a{
color:red;
text-transform:uppercase;
font-weight:bold;
height:40px;
padding-top:10px;
border-bottom:3px solid transparent;
transition: all 0.5s ease;
font-size:15px;
}
nav .navigatsioon .navbar-default .navbar-nav a:hover{
color:red;
border-bottom:3px solid orange;
}
nav .navigatsioon .navbar-default .navbar-nav a.active{
color:red;
border-bottom:3px solid orange;
}
nav .navigatsioon .navbar-default .navbar-nav a:visited{
text-decoration:none;
color:blue;
text-transform:uppercase;
font-weight:bold;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
<div class="navigatsioon">
<div class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.kopakutt.ee/" class="active">AVALEHT</a></li>
<li><a href="hinnakiri.php">HINNAKIRI</a></li>
<li>
<a href="renditingimused.php">Renditingimused</a>
</li>
<li><a href="tehnika.php">Tehnika</a></li>
<li><a href="kontakt.php">KONTAKT</a></li>
</ul>
</div><!-- /.navigatsioon -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="column col-xs-12">
</div>Prevent collapsed navbar from pushing content below
Try adding fixed-top class to your navbar element. It may help you.
Documentation page - https://getbootstrap.com/docs/4.1/components/navbar/#placement
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
Bootstrap 4 navbar pushing content down
I've changed your navbar position css to fixed, i hope this is the solution that you are looking for
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<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>
<header>
<nav class="navbar navbar--fixed navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"
style="enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path
d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg>
BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter"
class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax
Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
<a href="#Accounts">Accounts</a>
</li>
<li>
<a href="#Transfers">Transfers</a>
</li>
<li>
<a href="#Loans">Loans</a>
</li>
</li>
<li>
<a href="#Options">Account options</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<style>
html,
body {
overflow-x: hidden;
}
.navbar--fixed {
position: fixed;
width: 100%;
z-index: 1100;
}
#toggle-navbar {
position: fixed;
height: 110px;
background: white;
z-index: 1050;
width: 100%;
}
#submenu-toggle {
margin-top: 64px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
overflow-x: hidden;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
@media (max-width: 768px) {
#sidebar-wrapper {
height: calc(100vh - 110px);
margin-top: 110px;
}
.container-fluid {
margin-top: 110px;
}
}
@media (min-width: 768px) {
.sidebar-nav {
margin-top: 64px;
}
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
height: 100%;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
</style>
<script>
var AccountNav = (function () {
var wWidth;
$(document).ready(function () {
$("#submenu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
getWindowWidth();
ToggleNavBar();
});
$(window).resize(function () {
getWindowWidth();
console.log(wWidth);
ToggleNavBar();
});
function ToggleNavBar() {
if (wWidth >= 768) {
$("#toggle-navbar").css("display", "none");
} else {
$("#toggle-navbar").css("display", "flex");
if ($("#wrapper").hasClass("toggled")) {
$("#wrapper").toggleClass("toggled");
}
}
}
function getWindowWidth() {
wWidth = $(window).width();
}
})();
</script>Bootstrap dropdown on navbar pushing content down
The default definition for a nav in bootstrap is to push down content.
You can setposition: absolute; on ul
ul{
position: absolute;
right: 50px;
top: 14px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Image and text -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="Sample Image">
Bootstrap
</a>
<div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notifications <span class="badge badge-secondary">0</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar keep item from collapsing and center
So you need to play with media query a little to hide some element and show other.
1st thing I made is to igve your main logo is own container to fix
it on the top.2nd was to take the collopase button out from the div you added.
3rd I added to 2 div after main menu to show elements when screen
under 992px.4th I added My name to your main menu to and play again with display
to show it.
You will obviously need to change all class to className to make it work correctly.
Hope it is coming quite close to the question
.container-logo{
width:100%;
display:flex;
justify-content: center;
}
#navbarNavDropdown{
position: absolute;
top: 116px;
}
ul.navbar-nav{
padding: 0 15px;
}
@media (min-width: 992px){
#navbarNavDropdown{
position: relative;
top: 0;
}
ul.navbar-nav{
padding: 0;
}
.d-lg-list-item {
display: list-item!important;
}
}
.logo-main{
width:100px;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-logo">
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark list-unstyled">
<li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
<li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
<div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
<!--<div class="flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row list-unstyled">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
</ul>
</div> -->
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lacus vel justo porta ornare cursus finibus ligula. Quisque et neque cursus, finibus dui non, aliquam ex. Donec tincidunt interdum augue a scelerisque. Suspendisse congue semper odio. Vivamus in felis at lorem consectetur cursus. Fusce accumsan dignissim turpis, in ornare quam dictum ut. Aenean vel pretium risus. Ut ut tempus erat. Quisque eros risus, bibendum ac erat quis, semper hendrerit libero.
Aliquam et placerat augue. Ut sed ex arcu. Duis dapibus faucibus est posuere imperdiet. Sed et faucibus purus. Donec ex ex, facilisis id velit quis, congue eleifend nunc. Etiam sed leo orci. In molestie pharetra lacus, maximus dictum nunc iaculis nec. Aenean nisi ipsum, finibus nec ligula id, ultricies luctus orci. Quisque quis metus non nulla tincidunt tempor fringilla ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis, ligula id faucibus lacinia, metus tellus sagittis turpis, eget aliquet elit felis non risus. Nunc lacus dui, posuere non nisl a, eleifend facilisis ipsum. Fusce in leo nibh. Duis condimentum blandit lobortis. Fusce maximus risus eget urna sodales luctus.
Etiam rhoncus ornare dui, vel vehicula leo pellentesque sed. Curabitur in odio enim. Curabitur ut ullamcorper mi. Suspendisse condimentum sapien quis tortor auctor elementum. Donec ac euismod neque. Nunc eget sapien a purus viverra tincidunt. Mauris rhoncus arcu ut diam maximus malesuada. Mauris scelerisque mattis lectus sed venenatis. Ut viverra diam in eros lacinia, sit amet blandit nisl tempus. Aliquam condimentum magna et massa fringilla, nec facilisis odio fringilla. Etiam ultrices, mauris ut elementum sodales, sem justo ultricies orci, vitae fringilla dui magna ut sapien. Phasellus posuere lacus nec leo ornare rutrum.
Suspendisse neque lectus, fringilla quis dui in, feugiat scelerisque turpis. Aliquam porta turpis nulla, sit amet volutpat ex suscipit ac. Sed nec neque vel nibh porttitor laoreet. Quisque convallis dolor sem, non fermentum justo tincidunt sit amet. Aliquam vitae est elit. Cras eros felis, dignissim eget suscipit vel, facilisis et lorem. Morbi vitae tempus lorem. Aenean et ullamcorper orci. Nullam in finibus urna. Sed interdum vel libero at mattis. Nulla suscipit, massa in pharetra dapibus, massa metus mattis dui, quis efficitur quam est vitae arcu. Sed congue tristique suscipit. Praesent eget nibh volutpat, laoreet mi a, facilisis dui. Donec quis tellus et magna accumsan bibendum. Integer ullamcorper nibh non elit malesuada varius. Proin id laoreet mi.
Proin pharetra nibh non metus aliquam, tempus elementum felis ultricies. Mauris et enim nibh. Donec sit amet mi eu purus ultricies aliquam eget nec nibh. Cras velit nunc, viverra ut iaculis sit amet, molestie sed turpis. Etiam posuere quis enim ac ultrices. Quisque justo mi, vestibulum at enim at, suscipit pretium arcu. Aliquam vulputate ipsum mattis gravida laoreet. Nullam nulla ante, egestas viverra ligula nec, molestie luctus lorem. Phasellus convallis nulla et dignissim cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum condimentum nunc, ut maximus lectus blandit et. Curabitur elementum tellus risus, non semper odio hendrerit id. Mauris faucibus luctus suscipit. Nullam sed ultrices enim. Aenean facilisis risus id arcu consequat, a fringilla sapien elementum.
</div>
</body>Related Topics
CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases
Why Selecting by Id Is Not Recommended in CSS
Internet Explorer 8 Bug with Display: Table
"Text-Decoration" and the ":After" Pseudo-Element
Hotlinking My Cascading Style Sheets
Which One Is Faster: Hex Color Codes or Color Names
How to Create Pure CSS 3-Dimensional Spheres
How to Make Facebook Comments Widget a Fluid Width
How to Vertically Align a Progress Bar in Twitter Bootstrap
Font-Weight Is Not Working Properly
Grid Layout on <Fieldset>... Bug on Chrome
Flex Item with Image Child Doesn't Adjust Its Size Properly
Passing CSS Property:Value as SASS Mixin Argument
Why Do Inline Elements Behave Like Block Level Elements When Floated
How to Suppress Certain CSS Errors in Aptana Studio 3
Transform Scale: Problem with Scaling Down
Putting -Moz-Available and -Webkit-Fill-Available in One Width (CSS Property)