My data-toggle="collapse" menu disappears when it is clicked.
Although it does dropdown as required, whenever a user clicks anywhere on the dropdown menu, it disappears.
What am I doing wrong ? Here is my code:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bg-dark " href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">Other info goes here... //before the closing div
You need to add the data-target attribute so that Bootstrap knows which one to drop down.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bg-dark" href="#" data-target="#navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Account
</a>
<div class="dropdown-menu" id="navbarDropdown1" aria-labelledby="navbarDropdown">Other info goes here... //before the closing div
Related
I have a bootstrap navbar. I want to put signOut and welcome in the menu bar along with other menu items. Below is the screenshot of my navbar:
I want to put SignOut where the purple arrow is and right beneath "SignOut", I want to put "Welcome userName". I also want to move the logo and company/city name to extreeme left of the nav bar . How can I achieve that? Below is my code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">test City</span><br />test company</span>
</span>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active">Home <span class="sr-only">(current)</span></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</div>
<div>
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
</div>
</nav>
You can contain this section with a class. In this instance I called it <div class="sign">. Then since your ul is a direct child of the parent you can use .sign > ul in your CSS to target that div. To get it in that position you can simply apply absolute positioning which allows you to define the area of the page. In your application, the top right. You can then add in your Welcome & Username area underneath as other unordered list items.
.sign > ul {
position: absolute;
top: 0;
right: 0;
list-style-type: none;
}
<div class="sign">
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
I´m trying to add active style in buttons when the routes matches.
The dropdown menu elements add active style properly but parent element does not have this style.
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false">{{'entity' |
translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/listado']"><i class="fa fa-list"></i> {{'list' | translate}}</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/formulario']"><i class="fa fa-plus"></i> {{'new' | translate}}</a></li>
</ul>
</li>
<li>
</ul>
</div>
So the question is: How can i add active element in parent
{{'entity' | translate}} <span class="caret"></span>
when ul dropdown menu elements is selected?
You could try using the isActive method of the router:
https://angular.io/api/router/Router#isActive
To apply the active class to your parent <a> tag when either of the dropdown menu's routes are active, you could add a [class.active] attribute, as such:
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)"
So on your parent element, it would look like this:
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)">
{{'entity' | translate}} <span class="caret"></span>
</a>
I already have a dropdown with the following code:
note: class='bg_r' is in CSS for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUp▲</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
</div>
The output for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried).
Following is the code I tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.
Add btn-link class to button
Additionally add these styles to center align it
.bg_r {
background-color: aqua;
display: inline-flex;
align-items: center;
}
or add these 2 classes d-inline-flex align-items-center to bg_r span
.bg_r {
background-color: aqua;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<span class="bg_r d-inline-flex align-items-center p-1">
Language:
<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.
The above answer works, or you can also replace this line
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
by
Dropup
When viewing this from xs or sm viewport/screen sizes, and then clicking on my navbar toggler, it's pushing all the content, INCLUDING the header that the navbar-toggler is in, down the page to make room for the dropdown menus.
This appears to be different from Bootstrap 3 (as well as Bootstrap 4 alpha 5).
Any thoughts on how to stop doing this?
Here's the site to test...
https://test.wrestlestat.com/rankings/dual
Here's the code:
<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
#*<li class="nav-item"><a class="nav-link" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*#
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="comparisonDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
#*<div class="dropdown-divider"></div>*#
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rankings
</a>
<div class="dropdown-menu" aria-labelledby="rankingsDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="fantasyDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
</div>
</li>
</ul>
</div>
Why it happens?
The class sticky-top gives your navbar a position: sticky; which acts as a block element when you haven't scrolled yet. So when your navbar gets expanded it pushes all other block elements down.
Fix1 - pushes normal content down
Put this div: <div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div> at the end of your <nav>...</nav>, or above your input if you want the searchfield to be under the collapsed navbar.
Fix2 - doesn't push anything down
First do Fix1, then in your CSS add .sticky-top { position: fixed !important; }, Only do this if your not using sticky-top anywere else!, because when you don't scroll it acts like a block element so pushes its other content down. Also add some margin to your first container-fluid so its under the header again (cause the now fixed element doesn't take up space anymore) for example add classes pt-5 and mt-5 to them.
I'm using Bootstrap v4.0 for my site, and I have made a basic navbar which goes like this
(Codepen link).
And the problem with this menu is that, when you minimize the page to see how this nav works in md and sm devices, it shows a space between the navbar and the header:
see this image
So my question is, how to remove this space?
Here is the html code:
<nav class="navbar navbar-expand-lg navbar-custom BKoodakBold">
<img id="img1" class="hidden-xs" src="img/letter-logo.png" width="100" height="100"></img><script>rotateAnimation("img1",30);</script><img id="img2" src="img/text-logo.png" width="300" height="100"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarMd">
<i class="fa fa-bars fa-lg py-1 text-white"></i>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarMd">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
فروشگاه
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">ویژه</a>
<a class="dropdown-item" href="#">پایین ترین قیمت ها</a>
<a class="dropdown-item" href="#">مرور کردن</a>
<a class="dropdown-item" href="#">ساخت سلاح</a>
<a class="dropdown-item" href="#">پوشاک</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">تجارت</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
راهنما
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">پرسش و پاسخ</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
جامعه
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">وبلاگ</a>
<a class="dropdown-item" href="#">کاتالوگ</a>
<a class="dropdown-item" href="#">درباره</a>
<a class="dropdown-item" href="#">لیست قیمت</a>
<!-- <a class="dropdown-item" href="#">API Documentation</a>
<a class="dropdown-item" href="#">npm package</a> -->
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">مالی</a>
</li>
<button class="btn BJadidBold">ورود/ عضویت</button>
</ul>
</div>
</nav>
I have searched the forum to find a related problem, but I couldn't find anything useful. So it would be best if you can help me with that..
Thanks in advance :)
This space is the overflow of .navbar-custom.
You have to change the height:100px; to auto in media query.
#media only screen and (max-width: 992px) {
.navbar-custom {
height:auto;
}
}
Note:Place media query to bottom of your normal css. In codepen its on
top.