I have a dropdown menu, that when opened I need it to stretch the full length of the container, i'm using twitter bootstrap, currently it sits like in the image
Here is the html
<ul id="multicol-menu" class="nav navbar-nav pull-right">
<li class="dropdown">
Stay Connected
<ul class="dropdown-menu">
<div clas="row">
<li>
<div class="row">
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<a href="#myModal" role="button" data-toggle="modal">
<img src="img/book-now-block.png" />
</a>
</ul>
</div>
</li>
</div>
</ul>
</li>
put this css might help
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%; }
.dropdown-menu>li { display: block; }
Related
Having trouble setting the breakpoint for bootstrap nav and sub-nav on iPad portrait and down. I need the navigation to show the mobile version on iPad portrait and iPhone portrait and landscape, but currently stuck with it showing desktop sub-nav on iPad portrait:
So it should appear like this on iPad portrait:
It works in the fiddle here: jsfiddle link, though the collapse doesn't happen until 768px. I can't get it to work, however, in my code.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-4 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width: 800px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
.icon-bar{
background-color: #000;
}
}
WHAT I DID, I DIDN'T KNOW YOU WERE USING 4 COLUMNS NO MATTER WHAT SO I CHANGED THEM LG 4 XS 12 CHANGED THE MINWIDTH TO 750
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-md-4 col-xs-12 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width:750px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
#media (max-width: 967px) {
.navbar-header {
float: none;
}
.mega-dropdown-menu ul{
display: block;
position: relative;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
I discovered the solution was to set a new breakpoint:
#media (max-width: 800px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
which brings the sub-nav on iPad portrait to the same as iPhone portrait.
<nav class="navbar navbar-default" style="width:100%">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li ><a id="firstid" href="#">FOR HIM</a></li>
<li><a href="#" >FOR HER</a></li>
<li>FOR KIDS</li>
<li>PERSONALIZED</li>
<li>BIRTHDAYS</li>
<li>NOVELTY</li>
<li>HOME</li>
<li>EXPERIENCES</li>
<li>OCCASIONS</li>
<li>NEW</li>
</ul>
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
MultiCol Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-4">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
CSS
#multicol-menu{
display: none;
}
#firstid:hover #multicol-menu{
display: block;
}
I have written above code having a navigation bar now i want to show 3 columns list item on hover.I have tried different things but could't get the result.it would be very nice it anyone provide same as in the image. i have written custom css too but its not working.My intention is to show like in the image
https://i.stack.imgur.com/Nthnl.png
Well, try the following CSS:
div.row {
width: 400px;
display: none;
opacity: 0;
}
ul.list-unstyled {
float: left;
width: 30%;
}
#multicol-menu li.dropdown:hover {
display: block;
opacity: 1;
}
I am not able to keep my all ul/li list with logo and logged user name on the nav bar using materializecss? There are 6 navigations with a logo with a user name that I want to keep on the nav bar but, i am not able to keep all these on the nav bar. logo comes on the navigations text and user name come below of the nav bar. below are the some part of the html code.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<img style="height: 56px;width: 70px;" src="<?php echo base_url(); ?>assets/images/Pratham-1.png">
<i class="material-icons menu">menu</i>
<ul class="right hide-on-med-and-down">
<!-- <li> <?php echo $name;?></li>
<li>Logout</li> -->
<li><a class="dropdown-button" href="#!" data-activates="basicinfo"><i class="material-icons left">language</i>Basic Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="learningresults"><i class="material-icons left">show_chart</i>Learning Results<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="attendance"><i class="material-icons left">supervisor_account</i>Attendance<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="monitoringinformation"><i class="material-icons left">search</i>Monitoring Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="others"><i class="material-icons left">speaker_notes</i>Others<i class="material-icons right">arrow_drop_down</i></a></li>
<li><i class="material-icons left">vertical_align_bottom</i>Download Data</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><?php echo $name;?><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!-- Dropdown for Baisc Info large screen-->
<ul id="basicinfo" class="dropdown-content">
<li>Reach 2016-17</li>
<li class="divider"></li>
<li>What is Read? India</li>
<li>Tools & MME Formats</li>
<li>Implementation models</li>
<li>Archives</li>
</ul>
<!-- Dropdown for Learnign Levels large screen-->
<ul id="learningresults" class="dropdown-content">
<li>Camp-wise Results</li>
<li>Jumps Across Reading Levels</li>
<li>Know Your Progress</li>
<li>Comparison Reports</li>
<li>Goal Tracker</li>
</ul>
CSS - i have tried this so far I have tried this so far -
nav {
height: 120px;
line-height: 90px;
font-size: 12px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
/*height: 30px;
line-height: 30px;*/
}
nav .button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
nav .brand-logo {
font-size: 1.6rem;
}
#media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
}
nav a:hover {
color: blue;
/* text-decoration: underline;*/
}
I think this is more an issue with UI/UX design. I think this would look best on desktop as a side-nav that's fixed.
Here's an example from the Materialize Documentation without the need of changing the CSS:
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
<li class="search">
<div class="search-wrapper card">
<input id="search"><i class="material-icons">search</i>
<div class="search-results"></div>
</div>
</li>
<li class="bold">About</li>
<li class="bold">Getting Started</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Typography</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
<div class="collapsible-body">
<ul>
<li>Badges</li>
<li>Buttons</li>
<li>Breadcrumbs</li>
<li>Cards</li>
<li>Chips</li>
<li>Collections</li>
<li>Footer</li>
<li>Forms</li>
<li>Icons</li>
<li class="active">Navbar</li>
<li>Pagination</li>
<li>Preloader</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<li>Carousel</li>
<li>Collapsible</li>
<li>Dialogs</li>
<li>Dropdown</li>
<li>Media</li>
<li>Modals</li>
<li>Parallax</li>
<li>Pushpin</li>
<li>ScrollFire</li>
<li>Scrollspy</li>
<li>SideNav</li>
<li>Tabs</li>
<li>Transitions</li>
<li>Waves</li>
</ul>
</div>
</li>
</ul>
I am trying to replicate a desktop application layout that my client wants. I need help with space between divs and the min-height of tables. I have zero experience with customizing bootstrap so if I have done this the wrong way please share how it should be done. I tried to setup a plunker but i can't get it to work?
plunker
<body ng-controller="MainCtrl">
<div class="my-container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Master <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ng-controller="CustomerCtrl"><a ng-click="CustomerModal()">Customer</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
New <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ng-controller="JobCtrl"><a ng-click="clearSelectedJob();NewJobModal()">Job</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row clearfix">
<div class="col-md-2 column well">
<div class="classWithPad">
<div class="my-container well classWithPad">
<table class="table table-condensed">
<span style="background:#595959;display:block;margin-top:-20px;margin-right:-11px;margin-left:-11px;height:95px">ll</span>
<thead> <tr><th style="font-weight: bold;padding-top:30px">No</th><th style="font-weight: bold;">Name</th></tr></thead>
<tbody>
<tr ng-repeat="currentItem in jobArray" class="pointer no_selection" ng-class="{highlight: currentItem.JobNumber===selectedJob.JobNumber}">
<td>{{currentItem.JobNumber}}</td>
<td>{{currentItem.JobName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-10 column well">
<div class="classWithPad">
<ul class="nav nav-tabs">
<li ng-class="{active: isActive('/')}"><a ng-href="#/">Home</a></li>
<li ng-class="{active: isActive('/changeOrder')}"><a ng-href="#/changeOrder">Change Order</a></li>
<li ng-class="{active: isActive('/purchaseOrder')}"><a ng-href="#/purchaseOrder">Purchase Order</a></li>
</ul>
<div ng-view=""></div>
</div>
</div>
<div class="col-md-12 column">
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="my-container">
</div>
</nav>
</div>
</div>
</div>
Here is what the client wants
Here is what I have so far
Update
.my-container {
position: absolute;
top: 0;
bottom: 0;
}
There's no design pattern like that in Bootstrap. I have something that may work.
DEMO: http://jsbin.com/lopej
Look at the code: http://jsbin.com/lopej/edit?html,css,js
jQuery:
$(window).on('load resize', function() {
var navbarht = $('.navbar').outerHeight();
function columnHeight() {
// Column heights should equal the document height minus the header height
var newHeight = $(document).height() - (navbarht) -20 + "px";
console.log($(window).height(), (navbarht));
$(".primary-col").css("height", newHeight);
$(".secondary-col").css("height", newHeight);
}
columnHeight();
});
CSS:
html,
body {
background: #777
}
.site-main.row {
margin: 0
}
.header {
background: #C5E0DC
}
.primary-col,.secondary-col {
background-color: #ddd;
padding:10px;
}
.navbar {
margin: 0 0 10px 0
}
.inner {
min-height:100%;
background:#fff;
border:1px solid #ccc;
}
/* needed to override jQuery */
#media (max-width:767px) {
.primary-col,
.secondary-col {
height: auto!important
}
.site-main {
padding-bottom: 0px!important
}
}
/* larger viewport layout */
#media (min-width:768px) {
html,
body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
.site-main {
height: 100%;
padding:0 10px;
}
.secondary-col {
border-right: 10px solid #777
}
}
HTML:
<div id="page">
<!-- navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="row site-main">
<div class="col-sm-3 secondary-col">
<div class="inner">secondary</div>
</div>
<!-- /.col-sm-3 -->
<div class="col-sm-9 primary-col">
<div class="inner">primary</div>
</div>
<!-- /.col-sm-9 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-->
In terms of the height issue try
.my-container {
position: absolute;
top: 0;
bottom: 0;
}
I'm using zurb foundation 4.
I create a top bar with a search form within the same:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<form>
<div class="row collapse" >
<div class="small-10 columns">
<input type="text">
</div>
<div class="small-2 columns">
S
</div>
</div>
</form>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">Drop1
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Drop2
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
</ul>
</section>
I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?
http://cl.ly/image/1a412p3M3e1J
If you're using SASS, simply change:
input { height: $topbar-input-height }
To:
input { height: $topbar-height }
If you're using CSS, change the line with:
.top-bar input { height: 2.45em; }
To:
.top-bar input { height: 45px; }
Follow a similar process if you wish to change the width.
I am a big fan of CDN, so editing the Foundation files is not an option.
Here is the workaround that works for me:
.top-bar input {
height: auto !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}