<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
not getting footer at bottom of the page when there is no content is present in the body.so i need to fix footer at the bottom only, when i run the code the code.plzz give suggestion how to fix footer at the bottom exactly.
footer {
position: fixed;
bottom: 0;
}
just add this in your css.
A) Footer is fixed:
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
footer {
background-color: skyblue;
position:fixed;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
B) Footer is not fixed:
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
body {
height: 1200px;
position: relative;
}
footer {
background-color: skyblue;
position:absolute;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by Wiredelta </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
You have three options from which I would suggest using flex-box.
1. position: fixed
footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
2. Flex-box
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
Demo: https://codepen.io/marcobiedermann/pen/XpoarE
3. Table
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: table;
min-height: 100vh;
}
main: {
height: 100%;
}
footer {
display: table-row;
height: 1px;
}
Demo: https://codepen.io/marcobiedermann/pen/jImsc
Related
I want to remove my modal after click outside modal
$("#rightsidebar").removeClass("active");
//I tried this
$(window).click(function(e) {
var cd = $('#rightsidebar').hasClass('active');
var cf = $('#rightsidebar').val();
if(e.target.id == cf){
$("#rightsidebar").removeClass("active");
}
// if(cd == true){
// }else{
// }
// if(){
// alert("hai");
// }else{
// alert("nahi hai")
// }
// alert(e.target.id); // gives the element's ID
//alert(e.target.className); // gives the elements class(es)
});
//html code is below
<aside id="rightsidebar" class="right-sidebar notification active">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#setting">Notifications</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active slideRight" id="setting">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: calc(100vh - 70px);"><div class="slim_scroll" style="overflow: hidden; width: auto; height: calc(100vh - 70px);">
<div class="card">
<ul class="setting-list list-unstyled">
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Doctor visit completed
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Blood Pressure test reminder
</a>
</li>
<li>
<a href="#">
<span class="icon green-bg"> <i class="zmdi zmdi-notifications"></i></span>
Hospital Accepted your profile edit request
<button type="button" class="btn btn-sm edit">Edit</button>
</a>
</li>
<li>
<a href="#">
<span class="icon pink-bg"> <i class="zmdi zmdi-notifications"></i></span>
Doctor visit completed
</a>
</li>
</ul>
</div>
</div><div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.4); width: 2px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 3px; z-index: 99; right: 1px; height: 168.6px;"></div><div class="slimScrollRail" style="width: 2px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 0px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
</div>
</div>
</aside>
This is a general solution to do something when clicking outside of the element:
$(window).click(function(e) {
var $target = $(e.target);
if (!$target.closest('#rightsidebar').length) {
$("#rightsidebar").removeClass("active");
}
});
#rightsidebar:not(.active) {
display: none;
}
In this code, I assume that your modal is #rightsidebar
I recently used an open-source code for creating Sidebar to implement to my Website.
I'm trying to do 2 things mainly to it. The first thing I wanted to be "collapsed onLoad", I tried doing it myself but the content of it stayed out of the sidebar. The second problem I'm facing is "Keeping the icons on the same line of the content", I want the icons when the sidebar is collapsed to be on the same line of the list when it's open.
$(document).ready(function() {
// Hide submenus
$('#body-row .collapse').collapse('hide');
// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');
// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$('.menu-collapsed').toggleClass('d-none');
$('.sidebar-submenu').toggleClass('d-none');
$('.submenu-icon').toggleClass('d-none');
$('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
// Treating d-flex/d-none on separators with title
var SeparatorTitle = $('.sidebar-separator-title');
if (SeparatorTitle.hasClass('d-flex')) {
SeparatorTitle.removeClass('d-flex');
} else {
SeparatorTitle.addClass('d-flex');
}
// Collapse/Expand icon
$('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group -->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
I have made the necessary changes.
$(document).ready(function() {
// Hide submenus
$("#body-row .collapse").collapse("hide");
// Collapse/Expand icon
$("#collapse-icon").addClass("fa-angle-double-left");
// Collapse click
$("[data-toggle=sidebar-colapse]").click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$(".menu-collapsed").toggleClass("d-none");
$(".sidebar-submenu").toggleClass("d-none");
$(".submenu-icon").toggleClass("d-none");
$("#sidebar-container").toggleClass("sidebar-expanded sidebar-collapsed");
$("#push-medown").toggleClass("open");
// Collapse/Expand icon
$("#collapse-icon").toggleClass("fa-angle-double-left fa-angle-double-right");
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px;
opacity: 0;
}
#push-medown.open {
opacity: 1;
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-collapsed d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group-->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class=" w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted align-items-center d-flex" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
👉 Check it in action on codepen
I'm an amateur and I'm practicing. But when I code this I can't get the margin right for menu items.
This is my project:
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking#example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Can you help me to make xl and lg float right and responsive, please?
I tried everything to solve this problem but I failed every time.
And it's reveral theme, made with bootstrap.
It wants more text from me and I'm not very good in English. Oh, how can I tell?
I don't know much about CSS and HTML and this is a disaster.
Thanks a lot.
I have made some changes in your structure to make it aligned. As of now your navbar is aligned. Please confirm if it solves your problem.
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking#example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Below is my code for a nav-bar. Can someone please help me in activating the toggle button. It does not respond on click. I just want it to toggle the content of sidebar-wrapper. I want it to be completely visible and once I click on the button it should disappear and should come back once I hit the toggle button again. Am pretty new to this. Any help is appreciated.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" style="border:none;"><span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button></li>
</ul>
<div style="text-align: center; font-size: 20px; padding-top: 7px;">
<img src="images/logo.png">
<p style="display: inline"><b>Congress API</b></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: black">
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-stacked" id="menu">
<li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
<a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
</li>
<li onclick="showMainDivision('bills','legislate','committees','favourites')">
<a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
</li>
<li onclick="showMainDivision('committees','bills','legislate','favourites')">
<a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
</li>
<li onclick="showMainDivision('favourites','committees','bills','legislate');">
<a ng-click="getFavourites()" id="fav_load"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
</li>
</ul>
</div>
</div>
</div>
</div>
function toggleDIV(DIV)
{
if(document.getElementById(DIV).style.display=="none")
{
document.getElementById(DIV).style.display="block"
}
else
{
document.getElementById(DIV).style.display="none"
}
}
// use it like:
// onClick="toggleDIV('myDivName')";
I'm trying to add a delay for the bootstrap dropdown.
I have already added css to make the dropdown show on hover.
You can test it here http://www.bootply.com/YcVBzvXqrR
Here is my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
And here is my CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I need to know how to make the dropdown appear with after a small delay.
Two changes I would recommend
Add the below Jquery code to add delay:
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Remove the css
/.dropdown:hover .dropdown-menu {
display: block;
}/
This is the fiddle I have modified
http://www.bootply.com/YcVBzvXqrR#