Creating drop menus inside `sidebar-nav` - html

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>

Related

Navbar dropdown link left aligned in mobile app version

My navbar link "Services" is left aligned as compared to the other links. I want to align it with the rest.
I have tried Bootstrap NavBar not aligned, especially in mobile view but it doesn't help me in my scenario.
Please advise where am i going wrong.
Navbar
CSS:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 10px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding: 13px 0px 10px 0px;
display; inline;
display: inline-block;
}
.dropdown:hover{
background-color:#37979f;
border:1px solid;
border-color: #fff;
border-radius:4px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
margin-top: 10px;
display: none;
position: absolute;
background-color: #37979f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
color: #ffffff;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #37979f;
border:1px solid;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
HTML:
<div id="navbar" class="navbar-collapse collapse">
<ul class="navbar-right nav navbar-nav" style="background-color:#6FC2E3";>
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="active" >
<a class="page-scroll" href=".">Home</a>
</li>
<li>
<a class="page-scroll" href="./solutions">Solutions</a>
</li>
<li>
<div class="dropdown">
<a class="page-scroll" href="../services">Services</a>
<div class="dropdown-content">
<a class="page-scroll" href="../services/consulting.html">Consulting</a>
<a class="page-scroll" href="../services/development.html">Development</a>
<a class="page-scroll" href="../services/support.html">Support</a>
<a class="page-scroll" href="../services/managed-services.html">Managed Services</a>
</div>
</div>
</li>
<li>
<a class="page-scroll" href="./products">Products</a>
</li>
<li>
<a class="page-scroll" href="./blog">Blog</a>
</li>
<li>
<a class="page-scroll" href="./aboutus">About Us</a>
</li>
<li>
<a class="page-scroll" href="./contactus">Contact Us</a>
</li>
<li style="padding-top:13px;">
<font color="#DF0000 !important;" font size="4px;">Call: +61 449 176 002</font>
</li>
</ul>
</div>
why are you create new .dropdown class? already bootstrap have dropdown toogle refer this example it's working very well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse ">
<div class="container">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

How can I add an arrow down icon next to nav bar and make pages drop down menu?

I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".
In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li {
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after {
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after {
right:0;
left:0;
}
a:hover { color:red;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
You can use bootstrap to solve that problem and then apply your css to this bootstrap code.
<!DOCTYPE html>
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt=""></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>Home</li>
<li class="dropdown">
About Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropdown">
Units<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="jquery-3.1.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Just remember to change the <script src="jquery-3.1.0.min.js"></script> for your jquery file.
TESTED AND WORKING
Here your solution:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
height: 10vh;
background-color: #4D5061;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
nav ul li:hover a {
text-decoration: none;
color: red;
border-bottom: 1px solid red;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 93vh;
background-color: #A59E8C;
text-align: center;
color: white;
padding-top: 23vh;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.hero {
height: 750px;
}
h1 {
font-family: 'Roboto', sans-serif;
color: white;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #000000;
font-size: 50px;
}
.logo {
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down {
color: #4D5061;
}
footer {
height: 10vh;
}
</style>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></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>Home
</li>
<li class="dropdown">
About Me <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>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <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>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
</footer>
</html>
You miss the javascript files and some code as well...
Next time refere to http://getbootstrap.com and try to read all the documentation. Everything is super well documented there.
Also, if I can advice you, use an external css file to store your style...
It looks you are using Bootstrap, so try this code and I don't see bootstrap javascipt file in your code, which you have to link and jQuery of course.
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Let me know if you still couldn't figure out.

Bootstrap menu width

I have a Bootstrap menu, but I have a problem when I want to change the width of the screen.
For example for 767 < width of screen < 950, I have a problem.
It seems to be a problem in ul class="nav", but I can't find the problem and solve it.
.static-navbar {
float: right;
}
#media (min-width: 768px){
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
#media (min-width: 768px){
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
.navbar-nav li.drop {
position: relative;
}
#media (min-width: 768px){
.navbar-nav>li {
float: left;
}
}
.nav>li {
position: relative;
display: block;
}
.navbar-nav > li > a {
padding: 40px 15px 38px;
}
.navbar-nav li.drop ul.dropdown {
margin: 0;
padding: 10px;
position: absolute;
top: 100%;
left: 0;
width: 250px;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
Logo
</div>
</div>
<div class="col-sm-10 static-navbar">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
Lorem Ipsum
</li>
</ul>
</li>
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
Lorem Ipsum
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</div><!-- /.container -->
</nav>
I think Problems in .collapse. in screen < 767. Boostrap class collapse below css riles is apply.
.collapse{
display:none;
}
So, Your UL Not Display and you have not use collapse button in your html.
Try to something like this.
<!-- Latest compiled and minified CSS -->
<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.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-sm-10 static-navbar">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop"><a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>Lorem Ipsum</li>
</ul>
</li>
<li class="drop"><a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>Lorem Ipsum</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</div><!-- /.container -->
</nav>

Bootstrap navbar is not responsive

I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<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 navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<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 navbar-left" href="#">PAGE NAME</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 navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>

Modifying elements in Bootstrap

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