I have side nav menu but when i apply styles its disturbing other ul and li elements on page, I want to apply hover and selected styles to this nav, can you please share some sample how can do that for just this specific menu
<div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
<!-- Sidebar -->
<nav class="navbar navbar-center" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
<ul class="nav sidebar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Follow me
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
</div>
Add a unique className or even an id to your nav element
And then use a unique css selector.
something like:
nav.crazy-class-name-without-duplicates {
border: 1px solid red;
}
nav.crazy-class-name-without-duplicates > ul > li {
border: 1px solid tomato;
}
nav.crazy-class-name-without-duplicates > ul > li > a {
color: navy;
}
nav.crazy-class-name-without-duplicates > ul > li:hover {
/* li mouseover */
background-color: red;
}
a::selection {
/* a selection */
background-color: yellow;
}
<div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
<!-- Sidebar -->
<nav class="navbar navbar-center crazy-class-name-without-duplicates" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
<ul class="nav sidebar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Events
</li>
<li>
Team
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Follow me
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
</div>
Related
I created some classes for the menu items, so I can call upon them.
.dropdownBox {
display: none;
}
.dropdown li:hover > ul.dropdownBox {
display: block;
}
However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.
just update your CSS. Hope this will work for you.
.dropdownBox {
display: none;
}
.dropdown:hover + .dropdownBox {
display: block;
}
.dropdownBox:hover {
display: block;
}
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I've gotten the following code to look as I want it, except I need the last two nav bar items to align far right.
I can make that happen with ul {text-align: right; width: 100%; background-color: #48C2C5;}, but when I do that, it alters the size of my dropdown menus.
I've attached a few pictures along with the code.
I'm doing this in Springshare Libguides.
Nav bar without far right 2 aligned right:
Cut off dropdown menu:
<style>
.s-lib-box {border-color: none; border-width: 0; box-shadow: none; background-color: none;}
.s-lib-box .s-lib-box-title {display: none;}
.s-lib-box .s-lg-box-footer {display: none;}
body {padding-left: 0; padding-right: 0;}
#s-lib-public-main a {color: #17365D;}
#s-lib-public-main a:visited {color: #2293c0;}
/*ABC Header*/
#header-abc {background-color: #ffffff; width: auto; }
#banner-abc {height: 110px; width: 1200px; margin-left: auto; margin-right: auto;}
#logo-abc {float: left; margin-left: 12px; margin-top: 10px;}
#search-cat {margin-top: 15px; padding: 0px 0px; text-align: right;}
#translate {padding: 2px 0px;}
#google_translate_element {width: 160px; margin: 15px 0;}
/*Menu*/
.caret{solid #ffffff;}
#menu-abc .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a {
}
#menu-abc .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
color: white;
text-shadow: none;
}
#menu-abc .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
color:#006699;
text-shadow: none;
}
#menu-abc .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter,
.navbar .nav > li.current-menu-ancestor > a:first-letter {
color:#0099CC;
text-shadow: none;
}
#menu-abc .dropdown-menu > li > a {
color: #48C2C5;
background: white;
}
.dropdown ul li {
color:#0099CC;
}
#menu-abc .dropdown ul ul li a {
font-size:14px;
color:#0099CC;
}
#menu-abc .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
color: #red;
}
#menu-abc {background-color: #48C2C5; border-bottom: none;box-shadow: 3px 3px 10px 1px #green;}
#menu-abc .container-fluid {padding: 20;}
#menu-abc .navbar { min-height: 15px; background-color: #48C2C5;}
#menu-abc a {padding-right: 0px; font-family: Perpetua; font-size: 18px; font-weight: bold;}
#menu-abc a:hover {color: #red;}
.dropdown:hover .dropdown-menu {font-size: 14px; display: inline; }
.dropdown-menu > li > a {
background: #48C2C5;
border-bottom: none; }
#menu-abc {background-color: #48C2C5; border-bottom: none;box-shadow: 3px 3px 10px 1px #white;}
#menu-abc .container-fluid {padding: 0;}
#menu-abc .navbar { min-height: 15px; background-color: #48C2C5;}
#menu-abc a {padding-right: 25px; font-family: Perpetua; font-size: 18px; font-weight: bold;}
#menu-abc a:hover {color: #red;}
#menu-abc .dropdown:hover .dropdown-menu {display: block;}
.dropdown-content {
min-width: 160px;}
#menu-abc .navbar-default .navbar-collapse, #menu-abc .navbar-default .navbar-form {background-color: #48C2C5;}
#menu-abc .navbar-default {width: auto; margin-left: auto; margin-right: auto; border: none;}
#menu-abc .dropdown-menu a {color:#0099CC;}
#menu-abc .dropdown-menu a:hover {background-color: #yellow;}
#menu-abc .dropdown-menu .divider {background-color: #48C2C5;}
#menu-abc .navbar-default .navbar-nav > .open > a {color: #48C2C5; background-color: #yellow;}
#menu-abc .navbar-default .navbar-nav > li.open > a {color: #yellow; background-color: #48C2C5;}
#menu-abc .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu {display: block;}
#menu-abc .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu {display: block;}
/*Main Content Area*/
#s-lib-public-main .row {margin-bottom: 30px; margin-left: 5px;}
<title></title>
</head>
<body class="s-lg-guide-body">
<!-- BEGIN: Page Header -->
<meta content="97a72cc605382e45-5c9ddd9618eb904f-gad80e90ba61d526a-e" name="google-translate-customization">
<div id="header-abc">
<div class="container-fluid" id="banner-abc">
<div class="row">
<div class="col-sm-6 center" id="col1">
<div class="row">
<div class="col-md-6" id="logo-abc">
<img height="100" src="https://libapps.s3.amazonaws.com/accounts/27400/images/bunche_new_logo.jpg">
</div><!--/logo-abc=-->
</div><!--/row-->
</div><!--/col1-->
<div class="col-sm-6" id="col0">
<div class="row">
<div class="col-md-7" id="search-cat">
<br>
</div><!--/row-->
</div><!--/col2-->
</div>
</div><!--/banner-abc-->
</div><!-- Menu -->
<div id="menu-abc">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#abc-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="abc-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
My Account
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Find<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Catalog
</li>
<li>
Library Map
</li>
<li class='sub'>
Databases
<ul>
<li>
Current Trials
</li>
</ul>
<ul>
<li>
Direct Access Resources
</li>
</ul>
</li>
<li>
Find a Journal
</li>
<li>
Ebooks
</li>
<li>
Virtual Periodical Reading Room
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Get Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Research & Instruction Services
</li>
<li>
Ebook Virtual Library
</li>
<li>
Virtual Libraries
</li>
<li>
A - Z Journal List
</li>
<li>
Bibliographies
<ul>
<li>
Foreign Affairs Professional Reading List
</li>
</ul>
</li>
<li>
<a>Briefing Videos</a>
</li>
<li>
Copyright
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Library Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
My Library Account
<ul>
<li>
How to Create an Account
</li>
</ul>
</li>
<li>
Acquisitions and Procurement
<ul>
<li>
DS-2092
</li>
</ul>
</li>
<li>
Interlibrary Loan
</li>
<li>
Map Services
</li>
<li>
Instruction
</li>
<li>
Donations
</li>
<li>
Booking the Rare Book Room
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Mission and Vision
</li>
<li>
Library Staff
</li>
<li>
Policies
<ul>
<li>
Circulation
</li>
</ul>
<ul>
<li>
Collection Development
</li>
</ul>
</li>
<li>
Who was Ralph Bunche?
</li>
<li>
Rare Book Collection
</li>
<li>
5 FAM 1400
</li>
<li class="divider"></li>
<li>
Office of Information Programs and Services
</li>
</ul>
</li>
<li style="float:right;">
<a href="#</a>
</li>
<li style="float:right;">
A/GIS/IPS
</li>
</ul><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</div><!-- END: Page Header Without Encore -->
<!-- END: Page Header -->
</div>
</body>
</html>
I know LibGuides use Bootstrap 3, so instead of the float right on the last two list items, I've placed a pull-right class. I also set the UL element to stretch to 100%. The answer below only includes the HTML, not the CSS, but give it a try:
<div id="header-abc">
<div class="container-fluid" id="banner-abc">
<div class="row">
<div class="col-sm-6 center" id="col1">
<div class="row">
<div class="col-md-6" id="logo-abc">
<img height="100" src="https://libapps.s3.amazonaws.com/accounts/27400/images/bunche_new_logo.jpg">
</div><!--/logo-abc=-->
</div><!--/row-->
</div><!--/col1-->
<div class="col-sm-6" id="col0">
<div class="row">
<div class="col-md-7" id="search-cat">
<br>
</div><!--/row-->
</div><!--/col2-->
</div>
</div><!--/banner-abc-->
</div><!-- Menu -->
<div id="menu-abc">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#abc-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="abc-navbar-collapse-1">
<ul class="nav navbar-nav" style="width:100%;">
<li>
My Account
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Find<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Catalog
</li>
<li>
Library Map
</li>
<li class='sub'>
Databases
<ul>
<li>
Current Trials
</li>
</ul>
<ul>
<li>
Direct Access Resources
</li>
</ul>
</li>
<li>
Find a Journal
</li>
<li>
Ebooks
</li>
<li>
Virtual Periodical Reading Room
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Get Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Research & Instruction Services
</li>
<li>
Ebook Virtual Library
</li>
<li>
Virtual Libraries
</li>
<li>
A - Z Journal List
</li>
<li>
Bibliographies
<ul>
<li>
Foreign Affairs Professional Reading List
</li>
</ul>
</li>
<li>
<a>Briefing Videos</a>
</li>
<li>
Copyright
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Library Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
My Library Account
<ul>
<li>
How to Create an Account
</li>
</ul>
</li>
<li>
Acquisitions and Procurement
<ul>
<li>
DS-2092
</li>
</ul>
</li>
<li>
Interlibrary Loan
</li>
<li>
Map Services
</li>
<li>
Instruction
</li>
<li>
Donations
</li>
<li>
Booking the Rare Book Room
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Mission and Vision
</li>
<li>
Library Staff
</li>
<li>
Policies
<ul>
<li>
Circulation
</li>
</ul>
<ul>
<li>
Collection Development
</li>
</ul>
</li>
<li>
Who was Ralph Bunche?
</li>
<li>
Rare Book Collection
</li>
<li>
5 FAM 1400
</li>
<li class="divider"></li>
<li>
Office of Information Programs and Services
</li>
</ul>
</li>
<li class="pull-right">
Knowledge Portal
</li>
<li class="pull-right">
A/GIS/IPS
</li>
</ul><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</div><!-- END: Page Header Without Encore -->
<!-- END: Page Header -->
</div>
You problem is with this css code:
ul {text-align: right; width: 100%; background-color: #48C2C5;}
It will affected all the same element or recursively to all it's child element.
To solved this you can add additional id or class on the affected element to make it unique:
ul.unique {text-align: right; width: 100%; background-color: #48C2C5;}
or overwrite style on unwanted affected element only:
ul li.sub-menu {text-align: left;}
I was building a website where I encountered a problem in navigation bar that the elements of navigation bar is not coming center aligned
HTML and CSS code:
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
My css Code is
body{
background-repeat:no-repeat;
background-position: top right;
background-attachment: fixed;
}
h1{
margin:1px ;
color:red !important;
text-align:center;
}
hr{
border-color:red !important;
width:50%;
}
a {
padding: 0px 10px;
}
#navigation{
text-align:center!important;
display: inline-block!important;
margin: auto;
}
You are trying to center the ul with inline-block style, try to change the it to be block instead
body{
background-repeat:no-repeat;
background-position: top right;
background-attachment: fixed;
}
h1{
margin:1px ;
color:red !important;
text-align:center;
}
hr{
border-color:red !important;
width:50%;
}
a {
padding: 0px 10px;
}
#navigation {
text-align:center!important;
display: block!important;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
Try the below code, Hope this work...!
#media (min-width: 768px){
.navbar-nav {
float: none!important;
margin: 0 auto!important;
display: table!important;
table-layout: fixed!important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
If you want to center align the text in the "li" just do
.navbar navbar-inverse{
ul>li{
text-align: center;
}
}
I'm using Bootstrap to create a navbar in the top of the page, but i'm facing some problems:
After opening the navbar dropdown, I need to have a option list, and a image positioned to the right of the list. This image needs to have the same height of the list, just like in the following image (in portuguese, but easily understandable).
I achieved this setting a fixed height and width on the image, but the list can grow up and isn't a good option adjust it manually.
Another solution is to insert a div containing the list and the image, and set the image size to 100%, but when I do this, the dropdown isn't achieved anymore (I think i'm breaking the structure that Bootstrap uses to toggle the dropdown, am I right?).
How can I achieve this solution?
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav top-elements">
<li id="dropdown-produtos" class="dropdown">
Nossos Produtos<span class="caret top-caret"></span>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
<li class="dropdown-item-active">
texto1
<ul class="dropdown-menu img-dropdown">
<img src="assets/img.png">
</ul>
</li>
<li class="dropdown-item">
texto2
</li>
<li class="dropdown-item">texto3</li>
<li class="dropdown-item">texto4</li>
<li class="dropdown-item">texto5</li>
</ul>
</li>
</ul>
</div>
This should work:
<ul class="nav navbar-nav">
<li>Elemento 1</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
<ul class="dropdown-menu another-class">
<!-- ROW -->
<div class="col-md-12">
<!-- Column 1 -->
<div class="col-md-6">
<ul class="list-unstyled">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<div class="drop-image">
<img src="./img/img.jpg" class="img-responsive" />
</div>
</div>
</div>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Basically what I'm doing is create a div with a full width inside the dropdown element that comes as default in Boostrap. Inside this Full width row I create two columns with bootstrap col-md-6 class (you can do this with col-lg or col-sm or col-xs too) Inside this columns I add my content normally.
I created a class in the column 2 named "drop-image"; use this class to modify the img inside.
Hope it helps!
Btw, don't forget to style your dropdown (in the example I mark it with a class named another-class) so you define the position and width.
This might solve your problem, it's based off this plugin Yamm3!. See example Snippet.
Change this CSS rule if you need to make the dropdown wider because of the length of the link text. >
.list-unstyled, .list-unstyled ul {
min-width: 180px
}
body {
padding-top: 60px;
color: #666;
}
/* menu styes */
.list-unstyled,
.list-unstyled ul {
min-width: 180px
}
.list-unstyled > li {
padding-top: 10px;
}
.list-unstyled > li > a {
color: #555;
text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
background: #f5f5f5;
}
.yamm .yamm-content {
padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
#media (max-width: 767px) {
.yamm-content .list-unstyled > li img {
margin-top: -180px;
float: right;
}
}
<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="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Grande Menu
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos Dois<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="alert alert-warning">Olá</div>
</div>
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>