I would like to remove the white gap between my navbar and header , i dont know why i got the gap . i hope someone can help me
#import url(http://fonts.googleapis.com/css?family=Lato);
.container
{
width:800px;
overflow:hidden;
display:inline-block;
margin-top: 0px;
}
.side-bar
{
background:#74AFAD;
position:absolute;
height:100%;
width:200px;
color:#fff;
transition: margin-left 0.5s;
}
.side-bar ul
{
list-style:none;
padding:0px;
}
.side-bar ul li.menu-head
{
font-family: 'Lato', sans-serif;
padding:20px;
}
.side-bar ul li.menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
}
.side-bar ul .menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
margin: 0;
}
.side-bar ul .menu li a
{
color:#fff;
text-decoration:none;
display:inline-table;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.side-bar ul .menu li a:hover
{
border-left:3px solid #ECECEA;
padding-left:17px;
}
.side-bar ul .menu li a.active
{
padding-left:17px;
background:#D9853B;
border-left:3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content
{
padding-left: 200px;
transition: padding-left 0.5s;
}
.active > .side-bar
{
margin-left:-150px;
transition: margin-left 0.5s;
}
.active > .content
{
padding-left:50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#f5f5f5;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <span class="glyphicon glyphicon-align-justify pull-right"></span>
</li>
<div class="menu">
<li>
Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span>
</li>
<li>
User List<span class="glyphicon glyphicon-user pull-right"></span>
</li>
<li>
Add New Product<span class="glyphicon glyphicon-plus pull-right"></span>
</li>
<li>
Go to Website <span class="glyphicon glyphicon-globe pull-right"></span>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
Logout<span class="glyphicon glyphicon-log-out pull-right"></span>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>
as you can see , theres a litle gap over the ADMIN PANEL , how do i remove those gap ? thank you before
You need to position the div .side-bar explicitly at the top of its parent using top: 0;. (Note this di is already positioned absolute)
.side-bar{
top: 0;
}
Snippet below
#import url(http://fonts.googleapis.com/css?family=Lato);
.container {
width: 800px;
overflow: hidden;
display: inline-block;
margin-top: 0px;
}
.side-bar {
background: #74AFAD;
position: absolute;
height: 100%;
width: 200px;
color: #fff;
transition: margin-left 0.5s;
}
.side-bar ul {
list-style: none;
padding: 0px;
}
.side-bar ul li.menu-head {
font-family: 'Lato', sans-serif;
padding: 20px;
}
.side-bar ul li.menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
}
.side-bar ul .menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
margin: 0;
}
.side-bar ul .menu li a {
color: #fff;
text-decoration: none;
display: inline-table;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.side-bar ul .menu li a:hover {
border-left: 3px solid #ECECEA;
padding-left: 17px;
}
.side-bar ul .menu li a.active {
padding-left: 17px;
background: #D9853B;
border-left: 3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content {
padding-left: 200px;
transition: padding-left 0.5s;
}
.active>.side-bar {
margin-left: -150px;
transition: margin-left 0.5s;
}
.active>.content {
padding-left: 50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 220px);
}
.row-offcanvas-left {
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: #f5f5f5;
float: left;
height: 100%;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
#main {
height: 100%;
overflow: auto;
}
.side-bar {
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <span class="glyphicon glyphicon-align-justify pull-right"></span>
</li>
<div class="menu">
<li>
Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span>
</li>
<li>
User List<span class="glyphicon glyphicon-user pull-right"></span>
</li>
<li>
Add New Product<span class="glyphicon glyphicon-plus pull-right"></span>
</li>
<li>
Go to Website <span class="glyphicon glyphicon-globe pull-right"></span>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
Logout<span class="glyphicon glyphicon-log-out pull-right"></span>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>
Applying
margin: 0px;
to your body and removing
display:inline-block;
from your container appears to
work, but that might not be what you want depending on what other elements you want on your page.
Related
I have two css files
Say sidebar.css and topbar.css
When I link these in one html file, the properties get exchanged
Suppose if I specify the margin:0 to sidebar and margin:30px to topbar, the topbar gets placed at 0px too. And many other properties inside gets overridden etc. How should I overcome this and is there a way where I can link these codes in a html file individually without such problem? If not what changes should I make in the code.
I have a webpage containing nav elements and I've inserted a sidebar into the code which also consists some nav and other elements which makes alterations in my original webpage. When we link two css files ,how can we make 'em seperate and independent.
Here is my sidebar code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sidebar Menu with sub-menu</title>
<link rel="stylesheet" href="sidebarnewstyle.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="sidebarnewstyle.css"/> <!-- href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"-->
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">
Side Menu
</div>
<ul>
<li class="active">Dashboard</li>
<li>
<a href="#" class="feat-btn">RESULT
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Subject-wise
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>Subject</li>
<li>Change Password</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<div class="header">
SYSTEM
<script >
$('.btn').click(function(){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function(){
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function(){
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
And this is the corresponding css file of sidebar
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
z-index: 0;
}
.btn{
position: absolute;
top: 15px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click{
left: 260px;
}
.btn span{
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before{
content: '\f00d';
}
.sidebar{
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show{
left: 0px;
}
.sidebar .text{
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul{
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li{
line-height: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a{
color: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover{
background: #1e1e1e;
}
nav ul ul{
position: static;
display: none;
}
nav ul .feat-show.show{
display: block;
}
nav ul .serv-show.show1{
display: block;
}
nav ul ul li{
line-height: 42px;
border-top: none;
}
nav ul ul li a{
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a{
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover{
color: cyan!important;
background: #1e1e1e!important;
}
nav ul li a span{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate{
transform: translateY(-50%) rotate(-180deg);
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 600;
}
.content p{
font-size: 30px;
font-weight: 500;
}
And this is a topbar which also has nav and other css elements in its style sheet resulting overlapping etc.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NAv menu</title>
<link rel="stylesheet" type="text/css" href="topbarstyle.css">
</head>
<body>
<div class="navigation">
<nav>
I
II
III
IV
<div class="animation start-home">
</div>
</nav>
</div>
</body>
</html>
This is the code of topbar stylesheet
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap')
body {
font-family: 'Open Sans', sans-serif;
background: #2c3e50;
}
nav{
position: relative;
margin: 30px auto 0;
width: 420px;
height: 45px;
background: #000;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
nav a{
font-size: 15px;
color: white;
text-decoration: none;
line-height: 45px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
}
nav .animation{
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: #4dff4d;
border-radius: 8px;
transition: all .5s ease 0s;
}
a:nth-child(1){
width: 100px;
}
nav .start-home,a:nth-child(1):hover~.animation{
width: 100px;
left: 0;
}
a:nth-child(2){
width: 110px;
}
nav .start-II,a:nth-child(2):hover~.animation{
width: 110px;
left: 100px;
}
a:nth-child(3){
width: 100px;
}
nav .start-III,a:nth-child(3):hover~.animation{
width: 100px;
left: 210px;
}
a:nth-child(4){
width: 100px;
}
nav .start-IV,a:nth-child(4):hover~.animation{
width: 120px;
left: 300px;
}
I've tried z-index and position as fixed / absolute. But is there no other way to link these stylesheets seperately in a single html file.
When you link two css files, they are both loaded by the browser and interpreted as one big file, there is no way around it.
(note that this is how for instance css resets work: the first file will 'reset' all css to standardize it and then your css files come and are applied)
Since you have in both files a definition for nav the end result will be a combination of both definitions, with the last one taking precedence.
The only way I see around this is to actually use classes instead of elements as selectors.
I need to apply this theme for my django template using css. I wrote the css file but I have a mistake that not all the style is applied to the template. Please help.
This is the full code including the theme.css and the base html:
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width: 210px;
margin: 20px;
}
nav ul {
/* Removes bullet points */
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position: relative;
}
nav a {
color: #e8e8e8;
padding: 12px 0px;
/* Fill all available horizontal space */
display: block;
/* Remove underline */
text-decoration: none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
font-family: tahoma;
font-size: 13px;
text-transform: uppercase;
padding-left: 20px;
}
nav a:hover {
/*
RGBA background for transparancy:
last number(0.05) is the transparency
*/
background: RGBA(255, 255, 255, 0.05);
color: #fff;
}
nav a:hover span {
background: #7d2c41;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
position: absolute;
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
nav span {
width: 12px;
height: 12px;
background: #fff;
display: inline-block;
float: left;
margin-top: 3px;
margin-right: 20px;
position: relative;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
nav span:before {
content: "";
width: 12px;
height: 2px;
background: #3a3b3b;
position: absolute;
left: 0px;
top: 5px;
}
nav span:after {
content: "";
width: 2px;
height: 12px;
background: #3a3b3b;
position: absolute;
left: 5px;
position: top;
}
.cust-dropdown {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 2px solid #fff;
position: absolute;
top: -120px;
right: 20px;
}
.cust-dropdown ul {
margin: -110;
padding-left: -145;
list-style: none;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="{{STATIC_URL}}css/theme.css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li class="current"><span></span> Home </li>
<li> <span></span>AI assisted backtesting
</li>
<li> <span></span>Best stocks to trade today </li>
<li> <span></span>Get free data </li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown" role="button">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>About</li>
<li>Documentation</li>
<li>Pricing</li>
<li>Contact us</li>
<li>Register</li>
</ul>
</div>
</body>
</html>
First you should have the prerequisites in your settings.py file:
you must have django.contrib.staticfiles in your INSTALLED_APPS
you must have defined a STATIC_URL:
STATIC_URL = /static/
All this set, you put in your template file:
{% load static %}
<link href="{% static "css/theme.css" %}" rel="stylesheet">
See the docs for more details.
I have alignemet issues between caret and the vertical menu, please any help.. i tried float: , position .. nothing work with caret.
The caret should be at the top of the page.
How can I change the background of the caret like to be like lines similar to mobile application.
<style>
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width:210px;
margin:20px;
}
nav ul {
/* Removes bullet points */
list-style:none;
margin:0;
padding:0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position:relative;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
/* Fill all available horizontal space */
display:block;
/* Remove underline */
text-decoration:none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
/*
RGBA background for t
background: RGBA(255,255,255,0.05);
color:#fff;
}
nav a:hover span {
background: #7d2c41;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
nav ul li:hover ul {
display:block;
}
nav ul ul {
position:absolute;
left:210px;
top:0;
border-top:1px solid #e9e9e9;
display:none;
}
nav ul ul li {
width:200px;
background:#f1f1f1;
border:1px solid #e9e9e9;
border-top:0;
}
nav ul ul li a {
color:#a8a8a8;
font-size:12px;
text-transform:none;
}
nav ul ul li a:hover {
color:#929292;
}
nav span {
width:12px;
height:12px;
background:#fff;
display:inline-block;
float:left;
margin-top:3px;
margin-right:20px;
position:relative;
transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
nav span:before {
content:"";
width:12px;
height:2px;
background:#3a3b3b;
position:absolute;
left:0px;
top:5px;
}
nav span:after {
content:"";
width:2px;
height:12px;
background:#3a3b3b;
position:absolute;
left:5px;
position:top;
}
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<nav>
<ul>
<li class="current"><span></span> Home </li>
<li> <span></span>AI assisted backtesting
</li>
<li> <span></span>Best stocks to trade today </li>
<li> <span></span>Get free data </li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>About us</li>
<li>Documentation
</li>
<li>Pricing</li>
<li>Contact us</li>
<li>Register</li>
</ul>
</div>
you have syntax error on margin top semicolon & quote mark and position value
this is your code
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
should be
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
}
You can play with this and come up with a design that fits your site..
https://jsfiddle.net/Hastig/u00v1yer/
Hamburger positioned with absolute.
Icon within hamburger also positioned/centered with absolute.
Make sure hanmurger is within a container that has at least position:relative;
Control the 3 bars width by adjusting their margin.
.hamburglar {
position: absolute;
top: 0; right: 0;
display: flex;
align-items: center;
flex-direction: column;
width: 40px;
height: 40px;
background-color: black;
cursor: pointer;
}
.hamburglar-line {
display: flex;
flex: 1;
width: 90%;
margin: 6px 0;
background-color: hsla(0, 0%, 50%, 0.5);
}
.hamburglar-line:nth-child(2) {
margin: 0;
}
.hamburglar .fa {
position: absolute;
top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 36px;
color: hsla(0, 0%, 80%, 0.7);
}
.hamburglar .hamburglar-line,
.hamburglar .fa { transition: all 0.2s linear; }
.hamburglar:hover .hamburglar-line { background-color: hsla(0, 0%, 50%, 1); }
.hamburglar:hover .fa { color: hsla(0, 0%, 80%, 1); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="hamburglar">
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<i class="fa fa-caret-down"></i>
</div>
To move the button to the top right, you can:
.cust-dropdown{
position:absolute;
top:10px;
right:10px;
}
And now to add the burger menu icon, your button would look like:
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
Please make a working fiddle. Or you can try this,
.caret-right{
position: absolute;
right: 0;
top: 0;
}
I have got a CSS Drop-down menu on a website that I want to make responsive using CSS media queries, but it doesn't respond at certain breakpoints. Am using width and max-width attributes to make it respond but it fails. Please Assist?
HTML
.navbar{
width:100%;
max-width:1000px;
text-align:center;
margin-top:-8px;
margin-bottom:23px;
margin-left:160px;
}
.menu ul{
/*Removes bullets*/
list-style:none;
}
.menu ul .active{
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 20%, green); /* Standard syntax */
background: linear-gradient(red 20%, green); /* Standard syntax */
}
/*Styles each list within ul*/
.menu ul li{
background-color:green;
border:1px solid #ffffff;
width:100%;
max-width:173px;
height:35px;
line-height:35px;
margin:auto;
text-align:center;
/*Makes the list dispaly in a horizontal maneer*/
float:left;
position:relative;
border-radius:8px;
font: 15px;
font-weight:regular;
}
.menu ul li a{
text-decoration:none;
color:white;
display:block;
}
.menu ul li a:hover{
background-color:red;
border-radius:8px;
}
.menu ul ul{
position:absolute;
margin-left:-40px;
display:none;
}
.menu ul li:hover >ul{
display:block;
}
.menu ul ul ul{
width:100%;
margin-left:134px;
top:0px;
}
#media only screen and (min-width: 1023px) and (max-width: 1223px) {
.navbar{
width:98%;
max-width:1000px;
}
.menu ul li{
width:98%;
max-width:173px;
height:35px;
line-height:35px;
margin:auto;
}
.menu ul ul ul{
width:98%;
margin-left:134px;
top:0px;
}
}
<div class="navbar">
<div class="menu">
<ul>
<li class="active"> Home </li>
<li> Arts & Social Sciences <span class="arrow">▼ </span>
<ul>
<li> Sociology</li>
<li> Anthropology </li>
<li> Linguistics </li>
<li> Political Science <span class="arrow"> 〉</span>
<ul>
<li> World Civilization </li>
<li> Politics of Development </li>
<li> Comparative Politics</li>
<li> Globalization </li>
</ul>
</li>
</ul>
</li>
<li> Business & Economics <span class="arrow">▼ </span>
<ul>
<li> Business Management</li>
<li> Purchasing and Supplies </li>
<li> Economics
<ul>
<li> Micro Economics </li>
<li> Inflation </li>
<li> Stock Excahange </li>
<li> Supply Chain </li>
<li> Macro-Economics </li>
</ul>
</li>
</ul>
</li>
<li> Education<span class="arrow">▼ </span>
<ul>
<li> Education(Arts)</li>
<li> Early Childhood </li>
<li> Education(Scienmce)</li>
<li> Education & Technology
<ul>
<li> Marketing </li>
<li> Supply Chain </li>
</ul>
</li>
</ul>
</li>
<li> Contact Us</li>
</ul>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Menu</li>
<li>Menu</li>
<li class="dropdown">
Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>Sub-Menu</li>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</body>
</html>
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
} else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
} else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 700;
if ($(window).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($) {
$(document).ready(function() {
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
* {
margin: 0;
padding: 0;
text-decoration: none
}
body {
background: #555;
}
header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6DDB07;
float: left;
width: 15%
}
.logo a {
color: #6DDB07;
}
nav {
position: relative;
width: 980px;
margin: 0 auto;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu {
font-family: sans-serif;
background: #333
}
#cssmenu>ul>li {
float: left
}
#cssmenu>ul>li>a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#cssmenu>ul>li:hover>a,
#cssmenu ul li.active a {
color: #fff
}
#cssmenu>ul>li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
background: #448D00!important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 30px
}
#cssmenu>ul>li.has-sub>a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu>ul>li.has-sub>a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu>ul>li.has-sub:hover>a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#cssmenu ul ul li:hover {}
#cssmenu li:hover>ul {
left: auto
}
#cssmenu li:hover>ul>li {
height: 35px
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #ddd;
font-weight: 400;
}
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
border-bottom: 0
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
color: #fff
}
#cssmenu ul ul li.has-sub>a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub>a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul>li.has-sub:hover>a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu>ul>li.has-sub>ul>li.active>a,
#cssmenu>ul ul>li.has-sub>ul>li.active>a {
border-top: 1px solid #333
}
#media screen and (max-width:700px) {
.logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
text-align: center;
padding: 10px 0 0 0;
float: none
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%
}
#cssmenu ul {
width: 100%;
display: none
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #444
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover>ul>li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu>ul>li {
float: none
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333!important;
}
#cssmenu ul ul li:hover {
background: #363636!important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.active>a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu>ul>li.has-sub>a:after,
#cssmenu>ul>li.has-sub>a:before,
#cssmenu ul ul>li.has-sub>a:after,
#cssmenu ul ul>li.has-sub>a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 23px;
color: #ddd;
font-size: 12px;
font-weight: 700
}
.button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 12399994;
}
.button:after {
position: absolute;
top: 22px;
right: 20px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: ''
}
.button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 16px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #ddd;
content: ''
}
.button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened:before {
top: 23px;
background: #fff;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #444;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu>ul>li.has-sub>ul>li.active>a,
#cssmenu>ul ul>li.has-sub>ul>li.active>a {
border-top: none
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id='cssmenu'>
<div class="logo">Responsive </div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>Arts And Social Science</a>
<ul>
<li>sociology</li>
<li>Anthropology</li>
<li>Linguistics</li>
<li>Linguistics</li>
<li>Political Science
<ul>
<li>World Civilization </li>
<li>Politics of Development</li>
<li>Comparative Politics</li>
<li>Globalization</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Business & Economics</a>
<ul>
<li> Business Management</li>
<li> Purchasing and Supplies </li>
<li> Economics
<ul>
<li> Micro Economics </li>
<li> Inflation </li>
<li> Stock Excahange </li>
<li> Supply Chain </li>
<li> Macro-Economics </li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Education</a>
<ul>
<li> Education(Arts)</li>
<li> Early Childhood </li>
<li> Education(Scienmce)</li>
<li> Education & Technology
<ul>
<li> Marketing </li>
<li> Supply Chain </li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact Us</a>
</li>
</ul>
</nav>
</header>
<section style='padding-top:20px;font:bold 44px arial;color:#68D800;'>
CSS Menu
</section>
#media only screen and (min-width: 1023px) and (max-width: 1223px)
This will execute the code between 1023px and 1223px which is really really small.
Try using only one of them at a time like this:
#media only screen and (min-width: 1023px)
or this:
#media only screen and (min-width: 1023px)
Or just increase the resolution gap, like this:
#media only screen and (min-width: 768px) and (max-width: 1223px)
I've taken this bootstrap code for a simple sidebar:http://startbootstrap.com/template-overviews/simple-sidebar/
What I need is for this sidebar code to respect the footer and header in the following code:
HTML:
Header Content
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<! -- BEGIN: Side Bar Navigation -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- END: Sidebar Navigation -->
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
CSS:
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header{
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0
auto; overflow:
auto; padding;0px 0
width:940px;
}
#content{
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* BEGIN: SideBar Navigation Baare */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}