How to give the hover effect on the drop-down. I used the following code but the drop down opened on click only but I want something like this which is shown in the attachment. Please, look at the attachment.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu .caret {
display: none;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/* caret style */
.caret {
position: relative;
}
/* dropdown style */
.dropdown.open .caret:before,
.dropdown.open .caret:after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 7px 8px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown.open .caret:before {
bottom: 17px;
right: 15px;
border-bottom-color: #ccc;
}
.dropdown.open .caret:after {
bottom: 18px;
right: 15px;
border-bottom-color: #fff;
}
/* navbar style */
.navbar-nav>li>.dropdown-menu {
left: -9px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-nav>.open>a .caret:before {
bottom: -23px;
}
.navbar-nav>.open>a .caret:after {
bottom: -24px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- used for custom style sheet -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<!-- used for google font family -->
<link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">
<!-- used for fa fa icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" ? <!-- used for bootstrap Library -->
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background: antiquewhite;">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Active Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu a">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown 4<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu 4.1</li>
<li>Dropdown Submenu 4.2</li>
<li>Dropdown Submenu 4.3</li>
<li>Dropdown Submenu 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown 5<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.1</li>
<li>Dropdown Submenu 5.2</li>
<li>Dropdown Submenu 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.1</li>
<li>Dropdown Submenu 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.3.1</li>
<li>Dropdown Submenu 5.4.3.2</li>
<li>Dropdown Submenu 5.4.3.3</li>
<li>Dropdown Submenu 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.4<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.4.1</li>
<li>Dropdown Submenu 5.4.4.2</li>
<li>Dropdown Submenu 5.4.4.3</li>
<li>Dropdown Submenu 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 4<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 5<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4.3<b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
On hover it will show the triange drop down which is shown in the attachmwnt file. Please, help me some one who have knowledge of html css bootstrap.
Try javascript:
(Note that these functions are not how you toggle the navs; they are just for looping.)
var el=/*your main nav element*/;
function showDrop(ele){
ele.addEventListener("mouseenter",function(e){
//loop through all children and show each
ele.children.forEach(function(c){
if(c.children.length>0)showDrop(c);
//show children
c.style.display="";
});
});
}
showDrop(el);
function hideDrop(ele){
ele.addEventListener("mouseout",function(e){
//loop through all children and hide each
ele.children.forEach(function(c){
if(c.children.length>0)hideDrop(c);
//hide children
c.style.display="none";
});
});
}
hideDrop(el);
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
have a look at this
https://jsfiddle.net/34nLzq18/
Related
I've created a navbar with some dropdown menus. I wanted to have some nested dropdown. As bootstrap3 doesn't support nested dropdown, I manually create that. In wide screen that menu items are displayed, it's ok but in mobile devices size that menu hide in toggle button, it doesn't work correctly. How can I fix that in mobile sizes?
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-to-min" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand" id="brand-name"></div>
</div>
<div class="collapse navbar-collapse" id="navbar-to-min">
<ul class="nav navbar-nav">
<li>خانه</li>
<li class="dropdown">
دانشآموزان<span class="caret"></span>
<ul class="dropdown-menu">
<li>مقطع اول</li>
<li>مقطع دوم</li>
<li>مقطع سوم</li>
<li>مقطع چهارم</li>
<li>مقطع پنجم</li>
</ul>
</li>
<li class="dropdown">کارکنان<span class="caret"></span>
<ul class="dropdown-menu">
<li>مدیریت</li>
<li class="dropdown">معاونین<span class="caret"></span>
<ul class="dropdown-menu">
<li>معاون اول</li>
<li>معاون پرورشی</li>
</ul>
</li>
<li>معلمان</li>
<li>خدمات</li>
</ul>
</li>
<li>تماس با ما</li>
<li href="#"><a>همکاری با ما</a></li>
</ul>
</div>
</nav>
CSS:
.dropdown:focus > .dropdown-menu, .dropdown:active > .dropdown-menu{
display: block;
}
.dropdown-menu > .dropdown > .dropdown-menu{
top: 0;
right: 100%;
margin-top: -6px;
margin-right: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
#media (min-width: 768px) {
.dropdown-menu > li > .dropdown-nested:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #ccc;
margin-top: 5px;
margin-left: -10px;
}
.dropdown > .dropdown-nested > .caret{
display: none;
}
.dropdown:hover > .dropdown-menu{
display: block;
}
.open > .dropdown-menu{
display: none;
}
.navbar-default .navbar-nav > li > a:active {
color: #777;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #777;
background-color: #f8f8f8;
}
}
In addition, my page direction is rtl.
JSFiddle
From W3 schools, they have an example of how to do a nested dropdown bootstrap modal. https://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
$(document).ready(function(){
$('.dropdown a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
<!DOCTYPE html>
<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>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we use jQuery to open multi-level dropdowns on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li>
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li>
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
My bootstrap mobile menu needs clickable submenus. the top menus are clickable, but the sub menus are hover no matter what I try. I added data toggle but that did not help. what am I missing here?
here is my codepen:
http://codepen.io/iamgonge/pen/yMoMpV
html:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#multi-level-dropdown">
<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="index.html">LOGO</a>
</div>
<!-- menus -->
<div class="collapse navbar-collapse" id="multi-level-dropdown">
<ul class="nav navbar-nav">
<li>Software</li>
<li class="dropdown">
hardware<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
submenu
<ul class="dropdown-menu">
<li>stuff</li>
<li>stuff</li>
</ul>
</li>
</ul>
</li>
<li>accessories</li>
<li>electronics</li>
</ul>
</div>
</div>
</nav>
css:
.nav .navbar-nav{color: #fff;}
.navbar{background-color:#4F96BA;
}.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #333;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar-inverse .navbar-nav>li>a {
color: #fff;
text-transform: uppercase;
}
Jquery
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
HTML
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#" target="_blank">NewWindow</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Active Link</li>
<li>Link</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
CODE: http://www.bootply.com/97919
What do I have to change to my Bootstrap navbar so that the dropdown on the right works on the smaller screen as on the larger screens:
FULL CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHOWCASE: Bootstrap Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.container a {
color: yellow;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
</body>
</html>
Issue with Dasith's solution:
The fix for this is to simply add a background color:
.navbar-nav .open .dropdown-menu {
background-color: #fff;
Issue #2 with Dasith's solution:
Quick inspection through chrome dev tools got me to make this fix :
#media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
position:absolute;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #000;
}
}
Here's a adjusted version with the above edits for a better understanding how it plays out
here..
I have a weird question..
I use bootstrap for the first time and it's very awesome indeed. While coding my test website, I figured out something wrong in the monitor sizing.. and that's:
-I copied the navigation html code directly to new line
-I removed the hamburger icon for the switch toggle -show / dont show- from the second new created icon
-I modified the main content for the current element
-whenever I force small the monitor like alternativly telling the site I open from a small monitor, the second bar's element completely disappear. and since I already deleted the toggle button, I can't activate it nor doing anything but maximizing the size so it appears again.
The thing is, i want it to be completely appeared. No toggle thing, only compressing itself when its previewed from small monitor just like the navigation bar when I click on the hamburger icon
Any thoughts how to do this? Thanks and sorry for my awful annoying question. I know it's very annoying but, I just started learning this language and I may face some things in the process.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" media="screen" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<nav class="navbarmain navbar navbar-default mainnav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">S-Bolb</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 class="active">Feed <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Pages <span class="caret"></span>
<ul class="dropdown-menu">
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
<li role="separator" class="divider"></li>
<li>Add Page
</li>
<li>Manage Pages
</li>
</ul>
</li>
<li>Trending
</li>
<li>co.Groups
</li>
<li>Find Friends
</li>
<li>Analytics
</li>
<li>Events
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="wrapper">
<div class="userpanel">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Ahmed T.
</li>
Senior Designer
<br>
View my profile
<br>
<a>1</a>-<a>2</a>-<a>3</a>-<a>4</a>-<a>5</a>
<br>
<li role="separator" class="divider"></li>
Connected Networks
<li>Facebook /username
</li>
<li>Twitter /username
</li>
<li>Instagram /username
</li>
<li>Tumblr /username
</li>
<li>Behance /username
</li>
add more
</ul>
<ul class="sidebar-nav">
<li>Liked Pages
</li>
<li>App Center
</li>
<li>Games Feed
</li>
<li>Customize Profile
</li>
</ul>
<ul class="sidebar-nav">
<li>Social Groups
</li>
<li>Group 1
</li>
<li>Group 2
</li>
<li><a>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</a>
</li>
</ul>
<ul class="sidebar-nav">
<li>My Account
</li>
<li>Settings
</li>
<li>Privacy Policy
</li>
<li>Advertising
</li>
</ul>
<a class="block-button" href="#">Logout</a>
</div>
<!-- feed -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="usercontrolbar navbar navbar-default">
<div class="container">
<!-- 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 class="active">view all <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
close friends (3) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Suzan William
</li>
<li>Boza Suman
</li>
<li>Cameron Wheeler
</li>
</ul>
</li>
<li class="dropdown">
custom category (15) <span class="caret"></span>
<ul class="dropdown-menu">
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
<li>Group
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="font-size:22px;">Welcome back, Ahmed! <span class="glyphicon glyphicon-hand-left" id="menu-toggle" aria-hidden="true"></span></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/geometryangle.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
</body>
</html>
and the sidebar.css:
.row{
margin-right:0px;
margin-right:0px;
}
#wrapper {
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-right: -200px;
right: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: right;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-right: 0;
margin-right: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: right;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.choixMenu{
font-size: 12px;
float: right;
text-align-right;
margin-right: 1px;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-right: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-right: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
right: 70px;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
The second thing is:
How can I make the border sharp? Whenever I add new rule in CSS for all the layout to be with no border, it doesn't work, why is it soft from the edges and not completely 90 degree?
Answer to the second question:
To make the corners of your navbar you need to add the .navbar-static-top class like so:
<div class="navbar navbar-default navbar-static-top">
<!-- enter code here -->
</div>
I would suggest reinstalling the css file to get the toggle functions back.
Once you have that, within the Bootstrap CSS file, you can change when the Toggle function activates, this gives you the option to call the toggle on a certain screen-size.
secondquestion, you can either set the navbar-default/inverse to navbar-static-top, or if you want it to stick to the top, change the CSS to border-radius:0px !important
Hope this helps
Please hvae a look at the below code
<div id="main-sidebar-wrapper" style="margin-top:50px; width:150px;">
<ul class="sidebar-nav" style="margin-top:10px;">
<!-- <li> Face Sheet </li> -->
<li class="li_active"> History </li>
<li> Problems </li>
<li> Medications </li>
<!-- <li> Immunizations </li> -->
<li > Allergies </li>
<li> Vitals </li>
<li> Examinations </li>
<li > Counseling </li>
<li> Demographics </li>
<hr>
<li>Documents Upload
<ul class="sub-menu">
<li>E.C.G</li>
</ul>
</li>
<!-- <li> Documents </li> -->
</ul>
</div>
Here, the Documents Upload section, I want it to be a drop-up menu or drop-right side menu. How can I do this?
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:300px;
margin-right: 0;
margin-left: 0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
Please find updated fiddle.
Need to do some change in
<li>Documents Upload
<ul class="sub-menu">
<li>E.C.G</li>
</ul>
</li>
I have made required changes. Please go through the link.
This is similar to how the dropdown menus work on mobile, may help.
body,
html {
height: 100%;
}
.sidebar-fixed {
padding: 5px 18px;
position: fixed;
width: 175px;
height: 100%;
top: 0;
left: 0;
background: #f5f5f5;
}
.sidebar-fixed #drop-one {
list-style: none;
text-align: left;
}
.sidebar-fixed #drop-one > li {
padding-top: 10px;
font-size: 13px;
}
.sidebar-fixed #drop-one > li >a {
color: #555;
text-decoration: none;
}
ul.sidebar-list {
list-style: none;
display: inline;
text-align: left;
}
ul.sidebar-list > li {
font-size: 18px;
padding-bottom: 25px;
}
ul.sidebar-list > li > a {
color: #555;
text-decoration: none;
}
.main-content {
margin-left: 175px;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="sidebar-fixed" id="sideNavParent">
<ul class="sidebar-list">
<li> Sidebar
</li>
<li> Something
</li>
<li> Something <span class="caret"></span>
<ul id="drop-one" class="collapse" data-parent="#sideNavParent">
<li> Something
</li>
<li> Something
</li>
<li> Something
</li>
<li> Something
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="alert alert-info">Main Content</div>
</div>
</div>