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?
Related
This question already has answers here:
Disable responsive (mobile) navbar in Bootstrap
(2 answers)
Closed 1 year ago.
I tried to make a responsive bootstrap navbar but not to collapse it. I want the item in navbar still stay in line even on small screen.
Here is my current navbar:
<nav id="topbar" class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active d-flex align-items-center">
<a class="nav-link" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link" href="#"><span class="tobar-text">Brand</span></a>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 2</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
About Us
</li>
</ul>
</nav>
I have tried to set margin, padding, and whatever, but still it did not help. The items in navbar still fall into new line, I don't know why. Please kindly help. Thanks
The items in navbar goes to new line is because of flex-direction: column. You can use the flex utility as below.
<ul class="navbar-nav d-flex flex-row">
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>
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 "/"
Pretty simple, but I'm fairly amateur with Bootstrap.
I understand how to make the navigation bar with an image as the brand and the nav-items. Without hacking it, is there a proper way to have the brand positioned above the expanded navigation?
Basically looking for this;
EXPANDED
-----------------------------------------
| Logo |
-----------------------------------------
| Home About Contact |
-----------------------------------------
COLLAPSED
-----------------
| Logo ≡ |
-----------------
<nav class="mainNav navbar navbar-expand-md justify-content-center">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
Use flex-column to make the navbar items stack in 2 rows (lines).
group the logo & toggler together in 1 flexbox div (d-flex w-100)
use mx-md-auto (auto-margins) to center the logo on larger widths
use text-center to center items in the navbar-nav
https://www.codeply.com/go/W9HQcd3Pyw
<nav class="mainNav navbar navbar-expand-md navbar-light flex-column">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Read more about the Navbar and Utility classes in the Bootstrap 4 docs.
Related questions
How to centre navbar logo in Boostrap 4 with nav-links below
Bootstrap 4: Navbar with logo and 2 rows
Bootstrap 4 navbar with 2 rows and inline form
Im using the bootstrap navbar and its working fine, on mobile devices the toggle button appears and when this button is clicked it appears a dropdown with the correct menu items, just like the bootstrap default.
But i want also to have a menu item with the username that appears when a user has a session started, and when this menu item is clicked it appears also a dropdown menu with the items available to a user with a session initiated.
The menu items available to a user with a session initiated are:
<ul>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
Do you know how to use the bootstrap to create that dropdown menu with the above items for the user with a session start? So that when the menu item "Jan" is clicked apperas a dropdown menu with the items above using the bootstrap styles just like when the toggle button in mobile device is clicked it appears the dropdown with the menu items?
Working example wihout that part of show the dropdown menu items available for a user with a session initiated working properly: https://jsfiddle.net/eeeoft8n/3/
Please see the bootstrap docs, there are some great examples there.
you'll want to add the add the div with the dropdown-menu class and the necessary aria-toggle on the link to activate them.
.menu_container {
position: relative;
width: 100%;
}
div.dropdown-menu{
left:auto;
right:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="container-fluid px-0">
<nav class="navbar navbar-expand-md navbar-light">
Logo
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu_container">
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto d-flex align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="#">Item 0</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> Jan
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Delete brains</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
you might need to go fullscreen in order to get the full-width view instead of the mobile view