Evenly space icons whether they have notification badge or not - html

There won't be as many as shown in the image below, but this shows it more obviously. I am looking to have a couple of font awesome icons that are overlaid with a bootstrap badge to indicate notifications. The two problems I am having are:
When each of the icons have a notification badge, there is too much spacing between them
When an icon does not have a notification badge, they are no longer evenly spaced as a set of icons.
The html:
<div class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-bell"></i>
<span class="notification-badge badge badge-danger">1</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-calendar-alt"></i>
<span class="notification-badge badge badge-danger">4</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-list-alt notification-icon"></i>
{{--<span class="notification-badge badge badge-danger">2</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-comment"></i>
{{--<span class="notification-badge badge badge-danger">1</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-envelope notification-icon"></i>
<span class="notification-badge badge badge-danger">2</span>
</a>
</div>
</div>
The CSS:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
}
The rest is out-of-the-box Bootstrap 4.

Try a negative right margin that is the width of the badge, something like:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
margin-right: -18px;
}
Play around with the margin-right and the .nav-item or .nav-link margins to get to where you wanna be.

Related

How to disable hover on bootstrap 4 dropdown

I have a page with a data grid, and in that grid every row has a bootstrap dropdown button/menu in it with actions you can perform against that data row. The problem is, the menu opens on hover, and I want it to be on click only (so the user doesn't accidentally open the menu on the wrong row).
Is there a way via CSS to tell the menus to not do anything on hover? I'd prefer not to use jquery for it, and as I have other dropdowns on the page outside the grid, I'd also like to target the ones in the grid specifically so I don't bung up the others.
Sample cell in ng-repeat row:
<td class="text-center" ng-if="vm.isCustService">
<div class="dropdown drop-down-in-grid">
<button type="button" id="btnCustDetails_{{$index}}"
class="btn btn-success btn-sm dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-ellipsis-v fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnCustDetails">
<div>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/details/" id="lnkDetails_{{$index}}"><i class="fa fa-fw fa-user"></i> Customer Details</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/addresses/" id="lnkAddresses_{{$index}}"><i class="fa fa-fw fa-address-book-o"></i> Addresses</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/jobs/" id="lnkJobs_{{$index}}"><i class="fa fa-fw fa-calendar-o"></i> Jobs</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/createJob/" id="lnkAddJob_{{$index}}"><i class="fa fa-fw fa-calendar-plus-o"></i> New Job</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/notes/" id="lnkNotes_{{$index}}"><i class="fa fa-fw fa-file-word-o"></i> Notes</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/statements/" id="lnkStatements_{{$index}}"><i class="fa fa-fw fa-money"></i> Statements</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/orderSummary/" id="lnkOrderSummary_{{$index}}"><i class="fa fa-fw fa-tasks"></i> Order Summary</a>
</div>
</div>
</div>
</td>
Delete this style from your css
.dropdown:hover>.dropdown-menu {
display: block;
}

How to make navbar fixed on the top by using bootstrap material design? frezvasta.github.io

I'm using Bootstrap material design. Which is https://fezvrasta.github.io/bootstrap-material-design/
here is it's jsfiddle https://jsfiddle.net/Manoj07/4c90wbo3/
In this, I'm unable to make a navbar fixed on the top. I'm using a drawer navigation bar also in this so please help me out how to make navbar fixed top by using bootstrap material design? frezvasta.github.io
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
aabbaaaa
<a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
style="padding:0;"></i></a>
<a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
class="badge badge-info">0</span></sup></i></a>
</div>
</header>
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header style="display: inline-block;">
<i class="fas fa-home"></i>Home
<a class="navbar-brand" href="index.html" style="padding-left: 50%;"><img src="img/logo.png" class="img-fluid"
style="height: 25px;width: 25px;"></a>
</header>
<ul class="list-group">
<li class="list-group-item">
<div class="dropright show">
<a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Women</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Home Furniture</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">TVs and Appliances</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Sports, Books & More</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Mobiles and Gadgets</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Men</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Pets</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Baby</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Cars & Bikes</a>
</div>
</div>
</li>
<li class="list-group-item">My Cart</li>
<a href="my_order.html" style="text-decoration: none; color: black;">
<li class="list-group-item">
My order
</li>
</a>
<a href="profile.html" style="text-decoration: none; color: black;">
<li class="list-group-item">My account</li>
</a>
<li class="list-group-item">Notifications</li>
<li class="list-group-item">Help center</li>
</ul>
</div>
<main class="bmd-layout-content">
<div class="search-container">
<input type="text" placeholder="Search aabbaaaa for products" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
You mark up was all incorrect, Had fixed the markup and copule of css is updated.
You can add sticky-top class to make an element sticky to the top.
Please check the updated jsfiddle Here
Since the html is too long, I am not updating it here completely, justing posting the header part.
<header class="bmd-layout-header sticky-top">
<div class="navbar bg-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
aabbaaaa
<a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
style="padding:0;"></i></a>
<a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
class="badge badge-info">0</span></sup></i></a>
</div>
</header>
put this css code
.bmd-layout-header .navbar{
position: fixed;
right: 0;
left: 0;
}
.bmd-layout-content {
padding-top: 56px;
}
OR
you can put material css .fixed-top class beside .navbar class and put this css so your layout not overlap to fix header
.bmd-layout-content {
padding-top: 56px;
}
have you add class like this in you html?

How to place icons side by side with media queries

I am looking to use media-queries to place my FA icons side by side, when the screen width is below 544px in a nav bar type effect.
I have generated the media queries, as seen below:
/* Media Query for Sidebar */
/* For larger screens */
#media (min-width: 545px) {
span.icon {
display: inline-block;
}
span.text {
display: inline-block;
}
.sidebar {
position: static;
}
}
/* Smaller screens */
#media (max-width: 544px) {
span.icon {
display: inline-block;
float: right;
}
span.text {
display: none;
}
.sidebar {
position: relative;
}
.dashContent {
margin-top: 20px;
}
}
The current result I am getting would be similar to this: see here
My HTML Markup is here
<div class="row">
<div class="col-sm-3 col-xs-12">
<nav class="nav flex-column sidebar">
<a class="nav-link active" href="#"><i class="fas fa-chart-bar icon"></i> <span class="text">Dashboard</span></a>
<a class="nav-link" href="#"><i class="fas fa-cogs icon"></i> <span class="text">My Profile</span></a>
<a class="nav-link" href="#"><i class="fas fa-users icon"></i> <span class="text">Users</span></a>
<a class="nav-link" href="#"><i class="fas fa-graduation-cap"></i> <span class="text">Subjects</span></a>
<a class="nav-link" href="#"><i class="far fa-calendar-alt"></i> <span class="text">Bookings</span></a>
<a class="nav-link" href="#"><i class="fas fa-list-ul"></i> <span class="text">Reviews</span></a>
<a class="nav-link" href="#"><i class="fas fa-comments"></i> <span class="text">Messages</span></a>
<a class="nav-link" href="#"><i class="fas fa-question"></i> <span class="text">Support</span></a>
<a class="nav-link text-danger" href="#"><i class="fas fa-sign-out-alt icon"></i> <span class="text">Logout</span></a>
</nav>
</div>
<div class="col-sm-9 col-xs-12">
<div class="dashContent">
<p>Dashboard content should show up here.</p>
</div>
</div>
</div>
Is there something I am missing when using these media queries to align them?
You might need to add the screen tag to your media query, like so:
#media screen and (max-width: 544px) {
...
}
#media screen and (min-width: 545px) {
...
}
Here's a JSFiddle showing the functionality working:
https://jsfiddle.net/8329pjk9/3/

Reduce Border bottom length

Hi I want to know that whether can i reduce length of border bottom. I have a div and i have given border-bottom: 2px to that div i want to reduce the length of border. Is this possible.
I have this nav-bar and i have given css to its div want to reduce length of border. How can i do that.
This is my html
<div class="row">
<div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome">
<ul class="nav navbar-nav navbar-nav-primary">
<li class="active">
<a href="#one" data-toggle="tab">
<i class="fa fa-map-marker" aria-hidden="true"></i> <span class="li-text">Location</span>
</a>
</li>
<li>
<a href="#two" data-toggle="tab">
<i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span>
</a>
</li>
<li>
<a href="#three" data-toggle="tab">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span class="li-text">Reboots</span>
</a>
</li>
<li>
<a href="#four" data-toggle="tab">
<i class="fa fa-compress" aria-hidden="true"></i>
<span class="li-text">Reconnects</span>
</a>
</li>
<li>
<a href="#five" data-toggle="tab">
<i class="fa fa-battery-full" aria-hidden="true"></i>
<span class="li-text">Charge</span>
</a>
</li>
</ul>
</div>
This is my CSS
.welcome {
border-bottom: 2px solid #bcbcbc;
margin-left: 10px;
}
Move the welcome class into the ul tag and it should do what you want :)
remove the border-bottom css from the class welcome
and use this;
ul.nav.navbar-nav.navbar-nav-primary {
border-bottom: 2px solid #ddd;
}
.welcome {
margin-left: 10px;
}
You can use this for set height and width for set length
.welcome{
width:1000px;
border-bottom:1px solid magenta;
height:100px;
}

set icon and text on image

I was try to set icons and text on images but it put extra space beside image, so how can i remove extra space from image?
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
overflow: hidden;
}
div {
height: 250px;
width: 250px;
display: inline;
}
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
first : your img tags are not correct. should be <img src="url">
second : display:inline generates white spaces between elements. so i suggest you use float:left instead
for example if you want 4 divs on one row, use float:left;width:25%; that way you are sure there are no white spaces between the divs
also to be sure the img covers all the width of the div, use width:100%;height:auto on the img. plus overflow:hidden on the img has no effect . you can use it on the div instead
see snippet below :
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
width:100%;
height:auto;
}
div {
height: 250px;
width: 250px;
float:left;
width:25%;
position:relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>