I have the following as my navigation structure in my SammyJS app.
<div id="sidebar-left" class="col-lg-2 col-sm-1">
<input type="text" id="txt-search-items" class="search hidden-sm" placeholder="Search..." />
<div class="nav-collapse sidebar-nav collapse navbar-collapse bs-navbar-collapse">
<ul class="nav nav-tabs nav-stacked main-menu">
<li class="parent">
<i class="fa fa-dashboard"></i><span class="hidden-sm">Link 1</span>
</li>
<li class="parent">
<a class="dropmenu" href="#link2"><i class="fa fa-list-ul"></i><span class="hidden-sm">Link 2</span></a>
<ul class="child">
<li><a class="submenu" href="#/link2/sublink"><i class="fa fa-eye"></i><span class="hidden-sm">Sub Link</span></a></li>
</ul>
</li>
<li class="parent">
<a class="dropmenu" href="#link3"><i class="fa fa-archive"></i><span class="hidden-sm">Link 3</span></a>
<ul class="child">
<li><a class="submenu" href="#/link3/sublink1"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 1</span></a></li>
<li><a class="submenu" href="#/link3/sublink2"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 2</span></a></li>
</ul>
</li>
<li class="parent">
<a class="dropmenu" href="#/link4"><i class="fa fa-user"></i><span class="hidden-sm">Link 4</span></a>
<ul class="child">
<li><a class="submenu" href="#/link4/sublink1"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 1</span></a></li>
<li><a class="submenu" href="#/link4/sublink2"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 2</span></a></li>
<li><a class="submenu" href="#/link4/sublink3"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 3</span></a></li>
</ul>
</li>
<li class="parent">
<a class="dropmenu" href="#/administration"><i class="fa fa-cogs"></i><span class="hidden-sm">Link 5</span></a>
<ul class="child">
<li><a class="submenu" href="#/link5/sublink1"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 1</span></a></li>
<li><a class="submenu" href="#/link5/sublink2"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 2</span></a></li>
<li><a class="submenu" href="#/link5/sublink3"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 3</span></a></li>
<li><a class="submenu" href="#/link5/sublink4"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 4</span></a></li>
<li><a class="submenu" href="#/link5/sublink5"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 5</span></a></li>
<li><a class="submenu" href="#/link5/sublink6"><i class="fa fa-eye"></i><span class="hidden-sm">Sublink 6</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
I am trying to set the anchor links background color on active click, but this doesn't seem to be working with :a because of the use of #. Any ideas?
Related
Before the navbar breakpoint I'd like the right aligned items to always be visible with the left aligned items overflowing hidden. However if you check the codeply and drag the divider you'll see the left aligned items push the right aligned item off the screen.
https://www.codeply.com/p/atSWmE5DeY
I'd like to avoid calculating how many fit and dynamically removing items in javascript.
If I understand what you're asking, " like the right aligned items to always be visible with the left aligned items overflowing hidden" you'd use justify-content-end overflow-hidden on the the navbar-collapse..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end overflow-hidden" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
<li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
https://codeply.com/p/eqLnzoMJxD
I have a menu that is aligned to the right. The last menu is a dropdown menu. But the dropdown menu items doesn't stay on the screen. Half of it leaves the screen. I have been googling but I can't find the class that kepps it on screen.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="./img/BMB-logo.svg" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</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-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
As you can see in an older question, the dropdown-menu needs to be right aligned. In Bootstrap 5, dropdown-menu-right has changed to dropdown-menu-end...
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="ms-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="//placehold.it/75" width="75" height="75"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</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-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo
The accepted answer doesn't work for me due to the following CSS style:
.dropdown-menu[style] {
right: auto !important;
}
which overrides the right:0; property of .dropdown-menu-end. Removing the !important or adding it to the .dropdown-menu-end forces the dropdown to align right as intended.
I have a login page, but whenever I typed wrong credentials it showing the mainheader for login person but with no name.. See the image I attached for further explanations
login
login with wrrong credentials
this is what it look like when the person login successfully, it have name and company
View form
<ul class="nav navbar-nav navbar-right">
#{
AccountContactVM customer = (AccountContactVM)ViewBag.AccountData;
}
#if (customer.User == customer.User && customer.User != null )
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-user-circle fa-fw fa-lg" aria-hidden="true"</i>
#customer.User.FirstName #customer.User.LastName
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="disabled">
<div class="row">
<div class="col-md-3">
<i class="fa fa-user-circle" style="font-size:40px;padding:5px 20px;" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<p style="padding-top:5px;">
#customer.User.FirstName #customer.User.LastName
<br />
#customer.Company.AccountName
</p>
</div>
</div>
</li>
<li class="divider"></li>
<li><a asp-controller="Account" asp-action="Index">Customer Portal</a></li>
<li class="divider"></li>
<li><a a asp-controller="Account" asp-action="LogOut">Logout</a></li>
</ul>
</li>
}
else
{
<li><a asp-controller="Account" asp-action="SignUp">Register</a></li>
<li><a asp-controller="Account" asp-action="SignIn"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>Login</a></li>
}
<li ng-cloak><span class="glyphicon glyphicon-shopping-cart"></span></i>Cart(<strong>{{CartCount}}</strong>)</li>
</ul>
I have a code like this for displaying menu, login, register and select language on the same line. How do I get the Language selectbox on the same line?
The missing code is implemented here.
Screenshot
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
#*<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">xxxxx</a>*#
<a class="navbar-brand" href="/WebZenter" tabindex="-1">
<span style="padding-left: 30px">xxxxxx</span>
<img alt="Brand" src="~/CustomerFiles/BeoTjenester/WebZenter50x50.png" width="20" height="20" style="margin-top: -20px;" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="xxxxxxxx" asp-action="Jobs">xxxxxh</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">DinnerOut<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Index">Create Bill</a></li>
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Select">Select Bill</a></li>
</ul>
</li>
</ul>
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">#Localizer["Hello"] #UserManager.GetUserName(User)!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link"><span class="glyphicon glyphicon-log-out"></span>Log off</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-action="Register"><span class="glyphicon glyphicon-user"></span> #Localizer["Register"]</a></li>
<li><a asp-area="" asp-controller="Account" asp-action="Login"><span class="glyphicon glyphicon-log-in"></span> #Localizer["Login"]</a></li>
<li>
<div title="#Localizer["Request culture provider:"] #requestCulture?.Provider?.GetType().Name" class="collapse navbar-collapse">
<form id="selectLanguage" asp-controller="ChangeLanguage"
asp-action="SetLanguage" asp-route-returnUrl="#Context.Request.Path"
method="post" class="form-horizontal" role="form">
#Localizer["Language"] <select name="culture"
onchange="this.form.submit();"
asp-for="#requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems"></select>
</form>
</div>
</li>
</ul>
}
</div>
</div>
Missing code is added.
Below is my code snippet:
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">This is a LOGO </a>
</div>
<ul class="nav navbar-nav pull-right">
<li><a href="#" > Abous US </a></li>
<li><a href="#" > Contact US </a></li>
<li><a href="#" > Acount </a></li>
</ul>
</nav>
</div>
</div>
</div>
My question: How can I pull ABOUT US and CONTACT US items into the right and the ACOUNT is in the left?
As per the docs, you can use navbar-right to pull some elements to the right:
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>