I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;
This is my html;
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.
Any help appreciated.
To stop making your id card from moving to next line, float your "Some text" to left.
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span style="float:left;" class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
Related
I am using Boostrap 5 and have created a collapsing side-menu.
When the menu is collapsed it just shows icons that can still be clicked to show the sub-menu items.
However, these sub-menu items are obscured by Bootstrap Card.
I have tried changing the z-index on the menu items to a high value (2000) to no avail.
Here is what is happening:
Here is the HTML for the menu items in the image
<div class="collapse" id="change">
<ul class="nav flex-column ps-3 text-start bg-dark" style="z-index: 2000;">
<li class="nav-item">
<a href="{{ url_for('change_bp.change_get')}}" class="nav-link px-3">
<i class="bi bi-pencil-square me-2" title="New Change Request"></i>
New Change Request
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="{{ url_for('change_bp.my_changes') }}">
<i class="bi bi-person me-2" title="My Changes"></i>
My Changes
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="{{ url_for('change_bp.my_teams_changes') }}">
<i class="bi bi-person me-2" title="My Teams Changes"></i>
My Teams Changes
</a>
</li>
</ul>
</div>
I have tried using z-index in css and on each of the menu sub-items. Nothing works.
How can I get the sub-menu to display over the Boostrap card?
I have overflowing content in my Blazor Server app 4 Navbar that I have positioned horizontally at the top of the page.
A search reveals I have the following four options for resolving this:
Reduce the number or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which the navbar switches between collapsed and horizontal mode by using a media query.
Use the Priority+ Navigation Pattern at CSS-Tricks
Option 2 would do but I cannot find out how implement it.
Option 4 has some helpful implementation examples but these rely on JavaScript.
Because I'm using Blazor I want to use C# and not JavaScript.
Can anyone help me find a pattern or code for either option 2 or 4, but prefereably a Blazor implementation of option 4 the Priority+ Navigation Pattern.
I particularly like the demo CSS-Tricks calls the “Greedy Navigaton” example if anyone can Tell me how to Blazorize that.
To demonstrate the problem I have attached below some files that can replace the files of the same name that are generated using the VS 2019 Blazor Template.
Any comment most appreciated.
MainLayout.razor
#inherits LayoutComponentBase
<div class="toprow">
<NavMenu />
</div>
<div class="main">
<div class="content px-4">
#Body
</div>
</div>
NavMenu.razor
<nav class="navbar navbar-expand-md bg-dark navbar-dark ">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Long link Description One</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Two</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Three</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Four</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Five</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Six</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Seven</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Eight</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Long link Description Nine</a>
</li>
</ul>
</div>
</nav>
#code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
Index.razor
#page "/"
I have a question regarding navbars. I want to highlight a navbar item when I clicked an item but I don't know if I need to use angular or css for that. Can you guide me a little bit, please?
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a routerLink="/newTask" class="nav-link" href="#">New task</a>
</li>
<li class="nav-item">
<a routerLink="/users" class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
</ul>
</div>
You can use routerLinkActive which will add a css class that you can use for styling. So in the following code if the current route is /newProject the list item will be styled according to your active css class:
<li routerLinkActive="active">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
More information on routerLinkActive here.
I have a problem in bootstrap 4 navigation, I want to set left Logo/Brand and center Navigation button and right login/My Account button, I have tried to solve this, but when I click navigation button on mobile it suddenly goes to the right, Please look at codeplay http://codeply.com/go/8FOVzFRkfM
<nav class="navbar navbar-expand-md navbar-light" >
<div class="container"> <a class="navbar-brand text-primary" href="#">
<i class="fa d-inline fa-lg fa-stop-circle"></i>
<b> BRAND</b>
</a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
<span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
</div>
</nav>
You just need to use on order-md-0 order-last the navbarcollapse so that it is positioned last on mobile screen widths (when the Navbar is collapsed)...
<div class="collapse navbar-collapse order-md-0 order-last" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
https://www.codeply.com/go/KkYoATqtFy
Related: Bootstrap NavBar with left, center or right aligned items
The container inside the navbar is a flex having justify-content: space-between, Hence navbar-collpase which is initially hidden gets displayed on toggle gets pushed below.
Solution:
Making the navbar-collpase positioned absolute to the navbar will fix the problem.
Example:
#media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
width: 100%;
top: 56px; /*height of navbar in mobile*/
}
}
I've already checked:
Display inline-block image link with horizontal scroll
Bootstrap row with horizontal scroll
but both of them didn't really solve my problem.
What I have done:
I am using a free bootstrap template (sb-admin 2, which can be found here: http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html), more precisely I am actually working on the "chat" panel.
The original chat layout is:
What I am trying to accomplish is adding a "user list" below the "chat" text, and to accomplish such I've already made the entire server logic and, in order to be able to show / hide the chats, I'm using bootstrap's tabs : http://getbootstrap.com/javascript/#tabs (because it's way easier to control the entire flow of the chat).
In order to don't post the entire source code of the entire project (over 100k lines of code), I've replicated my proble, on a fiddle in order to post it.
The relevant part of the testing I've done is this one (it contains some twig and i'm politely asking you to ignore it, it won't be in the tags because I don't have any issue with twig):
<div class="panel-body">
<div class="span11">
<div class="row-fluid">
<div class="col-lg-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li><li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
<li role="presentation" class="active">
<a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
</a>
</li>
</ul>
</div>
</div>
</div>
This is what I've tried after reading all the posts about being able to scroll horizontally a set of elements, therefore what I did is:
create a container (span11)
create a fluid row (row-fluid)
create a col-lg-12 element (to fill the row)
parse inside it the entire set of elements (all <ul> <li>, all tabs).
What I was expecting was having a div with 100% width with a scrollable bar with the elements inside it, like this:
http://jsfiddle.net/zLez4drz/
(warning: fiddle taken from another question where I took the informations from)
While my output is this one instead:
<-- by setting height 50px
<-- by setting height 100px
In a nutshell, the elements are being printed on two (or multiple) rows according to the device (or resolution), while I want them to be all printed inline and able to scroll horizontally regardless the amount of <li>s inside the parent container.
Fiddle to work on:
http://jsfiddle.net/b7ghL587/1/
My questions:
Why is it happening? Is there any way to solve it or am I supposed to don't use lists at all and rewrite the javascript part?
Can the rest of the DOM influence this?
You can't scroll elements that are floated.You need to override some Bootstrap default code:
.nav-tabs > li {
float:none;
display:inline-block;
}
Here is a working fiddle.