So i want to add badge on top of the icon but it always show in the right of the icon
Here's the screenshot:
this is my code:
<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell">
<span class="badge badge-light">2</span>
</i>
</a>
</li>
i want to look like this:
You can do this by using position: absolute.
.iconClass{
position: relative;
}
.iconClass span{
position: absolute;
top: 0px;
right: 0px;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<li class="nav-item mr-3" style="width: 40px;">
<a href="#" class="nav-link nav-icon iconClass">
<i class="fas fa-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>
Put the bage on the same level with icon.
Set:
position: relative; to nav-icon
position: absolute; top: -5px; right: -5px; to badge; (top and right adjust for your needs)
<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>
Related
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.
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?
I'm trying to put a hover effect targeting the a-links in the navigation bar only (not the forwardslashes).
But I can't seem to access only the a-links, the effect ends up running along the whole navbar instead.
Seems to be a conflict with Bootstrap 4 here.
HTML
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
<!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
<a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
<button
class="navbar-toggler mr-left custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span> / </span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings">Archive<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe">Newsletter<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a
class="nav-link nav-social-icon"
target="_blank"
href="https://www.facebook.com/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</li>
</ul>
</div>
</nav>
CSS
.nav-item:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item:hover:after {
width: 100%;
}
Fiddle here
https://codepen.io/pen/WNNPdxv
To solve this issue you should not put separators inside the anchor elements.
Below is an approach which eliminates the extra HTML using the content property.
This is similar to Bootstrap's breadcrumb.
But as you're already familiar, first some cleanup ^^
remove the span separators from nav-links
use the span for text nodes (could be handy to put the animation on there)
move the animation from :after to :before (a separator is logically after an element, except for the last-child perhaps, this also gives you the elements width where you can now control the right position.)
use the :after for the separator
provide full width for the main navigation and use flexbox to align the space it's using (flex-end, center, space-between, ...)
HTML changes
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav navbar-primary w-100 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<span>Home</span>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings"><span>Archive</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>About</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net"><span>Contact</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
</li>
</ul>
</div>
Solution
Now to solve the issue, place the animation on before and separator on the after pseudo elements.
.navbar-primary .nav-item:after {
content: "/";
position: absolute;
top: 0.25rem;
left: auto;
right: -0.5rem; /* control the amount of space for the separator */
}
.navbar-primary .nav-item:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-item:hover:before {
width: 100%;
}
In case you want to change the character, you have only one editing place.
DEMO
In case you want to change the animation without the padding I'd suggest to distract the nav-link padding using calc().
.navbar-primary .nav-link:before {
content: "";
position: absolute;
bottom: 0;
left: 0.5rem; /* nav-link padding-left */
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-link:hover:before {
width: calc(100% - 1rem); /* minus nav-link padding left and right */
}
DEMO
You should put the hover on the a-link, and then a-link position:relative, or put the class position-relative to the a-link.
.nav-item a {
position: relative;
}
.nav-item a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item a:hover:after {
width: 100%;
}
I am trying to make a search input with an embedded search icon work in Bootstrap 4 navbar when the mobile menu is displayed. Below is my Boostrap 3 version that worked pretty easily...
I have a very long 'mobile' menu due to the nature of the application so I want to apply a max-height and overflow-y to the navbar-collapse so it doesn't cover entire screen.
However, when I apply those styles in Boostrap 4, my search icon does not stay 'inside' the input:
The styles I have applied to my search inputs are:
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
I am able to make the search icon stay inside the input if I apply max-height/overflow-y styles to the entire .navbar element. But this is not the look I am going for, and worse, it allows the mobile togglerButton to be scrolled off the screen. I have made a fiddle that reproduces the error.
Fiddle
Add position: relative to has-search. Also apply max-height etc to navbar-collapse only in mobile view.
See demo below:
.has-search { /* ADDED */
position: relative;
}
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
#media (max-width: 991px) { /* ADDED */
.navbar-collapse {
max-height: 150px;
overflow-y: auto;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
</div>
</nav>
<h1>Hello, world!</h1>
I have a aside which is of 260px width. when i try to place my user-icon and name info, there is too much of right-margin.
<div class="rightBox pull-right" href="#">
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Karl Cadigan</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
Below is my fiddle. I want to bring the user-icon and the user-name to left leaving the drop-down icon at right.
http://jsbin.com/kugudaho/6/edit
Add the following class in your CSS. Use display:inline-block to show the info next to each other.
ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}
DEMO
If I understand it right this is what you need
HTML Markup
<div class="rightBox" href="#">
<ul class="navbar-nav">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li class="glyph">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Frank</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
CSS
i {
list-style: none;
}
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
.fa-user {
position: relative;
background: #666666;
}
.fa-user:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
float: right !important;
}
.navbar-nav {
float: inherit;
padding-left: 10px;
}
I hope I understood what you need.
I think you're better off starting with a standard Bootstrap dropdown, and customizing where needed. Uses a lot less custom CSS (if any) and is easier to maintain...
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
Frank
<span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
</ul>
</div>
Example:http://www.bootply.com/f9WYqJqLmd