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.
Related
I want to center the menu items on my navbar. Right now my navbar looks like this:
I want to center the "Users", "Admin", and "records" of the navbar. I also want to move the logo a little bit center-aligned rather than at the bottom edge of the nav bar.
Below is my navbar code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<div class="nameLogo">
<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">City of Test</span><br />COMPANY OF TEST</span>
</span>
</div>
<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">
<div>
<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>
</ul>
</div>
</div>
<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>
<div class="welcome">
<ul>
<li class="nav-item" style="margin-right:5px" >
Welcome <%=userName %>
</li>
</ul>
</div>
</div>
</nav>
I tried using Bootstrap Justify-center, but that didn't work.
Any help will be greatly appreciated.
When constructing a grid, think of it like building blocks, but defined as "wrappers". So a good way to start is to look at what kind of blocks will make up the menu.
In your case, I would say that there are 4 main wrapper parts,
The navbar itself.
The Logo.
The menu items (User, Admin, Records).
The action(s), i.e. Sign Out.
With all of this in mind, we can start constructing our grid. Flex-box has various, handy properties, such as: justify-content and align-items.
Example with my proposed structure in mind:
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
max-width: 100%;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.no-gutters {
--bs-gutter-y: 0;
--bs-gutter-x: 0;
}
.navbar {
padding-left: 15px;
padding-right: 15px;
background-color: #324c3b;
color: #fff;
}
.nav-container {
max-height: 100%;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.nav-logo > img {
display: flex;
height: auto;
max-height: 100%;
width: 100%;
object-fit: contain;
}
.text-center {
text-align: center;
}
<nav class="navbar row">
<div class="nav-container row">
<div class="nav-logo col-1">
<img src="https://picsum.photos/150/100" alt="Logo" />
</div>
<div class="menu-container col-8">
<div class="row no-gutters">
<div class="menu-item col-4 text-center">
User
</div>
<div class="menu-item col-4 text-center">
Admin
</div>
<div class="menu-item col-4 text-center">
Records
</div>
</div>
</div>
<div class="actions-container col-1 text-center">
Sign Out
</div>
</div>
</nav>
Codepen: here.
Add the class justify-content-center to the div with id navbarSupportedContent, your items will become centered.
About the logo, I copied your code, and the logo-text seems to be on the same center line as the other items.
JSFiddle
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?
Below is my code for the footer of a webpage I'm building:
<div class='footer'>
<footer class="page-footer font-small pt-4">
<div class="container text-center text-md-left">
<div class="row">
<ul class="list-unstyled">
<li>
Hello
</li>
<li>
Hello
</li>
<li class="dropdown">
<a class="footer-dropdown footerstyle dropdown-toggle" id="dropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Team
</a>
<div class="dropdown-menu sub-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="">Team members</a>
<a class="dropdown-item" href="">Our Story</a>
<a class="dropdown-item" href="">Join the team</a>
</div>
</li>
<li>
Hello
</li>
<li>
Hello
</li>
</ul>
</div>
</div>
</footer>
Below is the styling I've applied:
.dropdown-item {
font-family: Roboto-Regular;
background-color: #F0F0F7;
}
.dropdown-item:hover {
font-family: Roboto-Regular;
font-weight: bold;
background-color: #F0F0F7;
display: block;
cursor: pointer;
}
.dropdown:hover .dropdown-menu {
display: block;
font-family: Roboto-Regular;
background-color: #F0F0F7;
border-radius: 0;
cursor: pointer;
}
When I hover over the dropdown menu it doesn't show left-most border of the dropdown box. How can I make it so that it shows up?
(UPDATE: Resolved - i had to add the javascript in $(document).ready(function(), which i was missing. The below eg worked perfect for me.)
I am trying to make a Multi-Level Navbar work with Angular 6 & Bootstrap 4.
How do i expand and colapse sub-menu's on click or hover? I want the menu to expand to the right...
Eg: I found a solution on this link - but i am not sure how to inject Javascript in a Angular component.
https://codepen.io/surjithctly/pen/PJqKzQ
Here are my version details
+-- bootstrap#4.1.3
+-- jquery#3.3.1
+-- popper.js#1.14.4
Below is my Navbar Code
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#" style="color: red;">
My 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">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownHI" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownHI">
<li><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item dropdown"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">View All</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
You need to add custom styles along with the following html
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-item">Some action</li>
<li class="dropdown-item">Some other action</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Even More..</a>
<ul class="dropdown-menu">
<li class="dropdown-item">3rd level</li>
<li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu">
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
</ul>
</li>
<li class="dropdown-item">3rd level</li>
</ul>
</li>
<li class="dropdown-item">Second level</li>
<li class="dropdown-item">Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I tried to make this part of my code hoverable using CSS only but didn't work, I followed steps right here, http://www.w3schools.com/howto/howto_css_dropdown.asp , But i couldn't put anything correctly in its place on my code, I either make the hoverable or instead i make the entire .list hoverable but yet the .list doesn't work hover hover
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="list">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
CSS (What I've tried by myself)
<style>
.dropdown-menu {
visibility: hidden;
}
.dropdown-menu:hover > .list {
visibility: visible;
}
</style>
This is a strange structure, but the core of the issue was in your targetting of the wrong classes.
.dropdown{
display: block;
}
.dropdown-menu {
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="list">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
.dropdown-menu:hovern .list {
visibility: visible;
}
this would work, You forgot to remove the '>' from the code that didn't allow css to access the list class, just remove'>' from the code and it may work.
in CSS, any class present in another class can be targeted by just writing the class name with '.'operator.
example- HTML code:
<div class="A">
<div class="B"></div>
</div>
CSS code:
.A .B{
}
this is how you access a subClass with parent class.