How do i center the dropdown menu on the screen (small screens in particular).
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</div>
I have tried to add position:absolute, left:0 etc. however without any luck..
You can use transform:
Example:
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
If you need more info, you can read more about it on the CSS-tricks
In this case (in a media query) you can use position: fixed, an appropriate top value (equal to the height of the navbar), and for the horizontal centering left: 50% and transform: translateX(-50%);
Related
I have a simple question : when I use dropdown bootstrap https://getbootstrap.com/docs/5.1/components/dropdowns/#alignment-options, if I inspect the element I can see some properties added inline :
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(0px, -40px);
How can I remove this ?
I want to have my element centered in relation with my button and not on the right or left.
So, for this, want to use the position absolute and top and left not inset. Unless is there another possibility ?
I put bootstrap example behind.
.dropup {
margin-top: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
EDIT. I would like to have this :
Thanks a lot far answer.
UPDATED
You can override left and right values on dropdown-menu to achieve it.
For example
.dropup {
margin-top: 8rem;
margin-left: 8rem;
}
.dropdown-menu {
right: auto !important;
left: -50% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
OLD ANSWER
All those inline CSS attributes are under dropdown-menu, so you can easily override it with !important
The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
For example
.dropdown-menu {
inset: auto !important;
}
But you need to be careful with !important. That might cause some CSS problems if you try to style on the same class with the same attribute again on other places
I've this breadcrumb section that contains a dropdown menu, but the list is shown behind other block. I know this issue is common and tried to play with the number of z-index but nothing worked.
Here is the code:
<div class="breadcrumb-wrap ">
<ul class="breadcrumb">
<li class="breadcrumb-item dropdown show">
1nd menu
<a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-chevron-down color-info"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="https://www.google.com/">Sub1</a>
<a class="dropdown-item" href="https://www.google.com/">Sub2</a>
<a class="dropdown-item" href="https://www.google.com/">Sub3</a>
</div>
</li>
<li class="breadcrumb-item dropdown show">
2nd menu
<a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-chevron-down color-info"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="https://www.google.com/">Sub1</a>
<a class="dropdown-item" href="https://www.google.com/">Sub2</a>
</div>
</li>
</ul>
</div>
the second block:
<section class="s-pt-xl-60 s-pt-lg-60 s-pt-md-60 s-pt-60 s-pb-xl-280 s-pb-lg-250 s-pb-md-90 s-pb-60">
<div class="container">
//some code
</div>
</section>
and for the dropdown, it has the default css:
.dropdown-menu {
background-color: #fff;
border: none;
border-radius: 0.9rem;
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
font-size: inherit;
right: auto;
line-height: 1.5;
margin-top: 10px;
padding: 40px;
left: auto;
width: 300px;
z-index: 1004;
}
what am I missing in this code?
To make z-index works you must also set the position and must NOT be static.
So, add also the position on your class and will bring it in front.
I posted a previous question concerning Positioning NavBar at Top of Page but Losing Clickability on Main Content. The question was answered but it has now led to an unintended consequence. At first it prevented a dropdown menu item from appearing above the content. I updated the dropdown with a z-index: 99999; position: relative; value to get it to display above the content but now it expands the height of the Header section. Here are 3 images.
Unselected Dropdown:
How it used to appear:
How it now appears using z-index: 99999;position: relative;
Here is the code for the navbar:
<header>
<div class="navbar navbar-inverse" id="edadTopNavigation">
<div class="container-fluid app-navbar">
<div class="navbar-collapse collapse app-navbar-text-section">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="adminDropdownMenuLink" href='#' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="fa fa-cog"></div> Admin</a>
<div class="dropdown-menu" aria-labelledby="adminDropdownMenuLink">
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="Acronym" asp-action="Index">Acronyms</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">Users</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">States</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">Countries</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
Here is the current CSS:
.navbar {
/* margin-bottom: 0px;*/
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
overflow: hidden;
z-index: 200
}
.dropdown-menu {
padding: 10px;
background-color: #fff;
background-color: #fffff2;
z-index: 99999;
position: relative;
}
What can I do to get the dropdown to display like image 2 instead of image 3?
I have put css animation dropdown menu which you can see here:
/* CSS used here will be applied after bootstrap.css */
.dropdown .dropdown-menu {
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
from {
transform: scale(0);
opacity: 0;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
to {
opacity: 1;
transform: scale(1);
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container pt-5">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<div class="dropdown mb-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="btn-group dropleft dropdown mb-5">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
<div class="btn-group dropright dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DropRight
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
</div>
</div>
</div>
On dropdown menu show animation is working as expected. But how to do exit animation when dropdown menu is hiding. I want to exit animation look like the reverse animation on dropdown menu show. Please suggest
you need to remove the animations from your css and make your .dropdown-menu display: block !important because it was a js to hide and show dropdown in bootstrap, for initially you have to make transform: scale(0); to .dropdown-menu and also apply transition to it and when you click on button the class .show added with the class .dropdown-menu now when show class appears make css transform: scale(1); for more understanding see the following snippet.
.dropdown .dropdown-menu {
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
display: block !important;
transform: scale(0);
}
.dropdown .dropdown-menu.show{
transform: scale(1);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container pt-5">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<div class="dropdown mb-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="btn-group dropleft dropdown mb-5">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
<div class="btn-group dropright dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DropRight
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
</div>
</div>
</div>
It will happen b'coz of when we set display:block or display:none then our animation is not working.
You just need to set transform: scale(0); instead of display:none. Please review my styling for more information.
Let me know if you have a question about the same
Hope this help
.dropdown .dropdown-menu {
animation-name: example;
animation-duration: 1s;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
opacity: 1;
transform: scale(1);
}
.dropdown .dropdown-menu{
transform: scale(0);
opacity: 0; display:
block !important;
}
.dropdown-menu.show {
display: block;
transform: scale(1);
opacity: 1;
}
#keyframes example {
from {
transform: scale(0);
opacity: 0;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
to {
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
opacity: 1;
transform: scale(1);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container pt-5">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<div class="dropdown mb-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="btn-group dropleft dropdown mb-5">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
<div class="btn-group dropright dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DropRight
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<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>
</div>
</div>
</div>
</div>
I am trying to make a search input with an embedded search icon work in Bootstrap 4 navbar when the mobile menu is displayed. Below is my Boostrap 3 version that worked pretty easily...
I have a very long 'mobile' menu due to the nature of the application so I want to apply a max-height and overflow-y to the navbar-collapse so it doesn't cover entire screen.
However, when I apply those styles in Boostrap 4, my search icon does not stay 'inside' the input:
The styles I have applied to my search inputs are:
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
I am able to make the search icon stay inside the input if I apply max-height/overflow-y styles to the entire .navbar element. But this is not the look I am going for, and worse, it allows the mobile togglerButton to be scrolled off the screen. I have made a fiddle that reproduces the error.
Fiddle
Add position: relative to has-search. Also apply max-height etc to navbar-collapse only in mobile view.
See demo below:
.has-search { /* ADDED */
position: relative;
}
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
#media (max-width: 991px) { /* ADDED */
.navbar-collapse {
max-height: 150px;
overflow-y: auto;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
</div>
</nav>
<h1>Hello, world!</h1>