<div class="input-group">
<button class="btn btn-default full-width">
<span class="pull-left"><i class="fa fa-sitemap"></i> Fills remaining width</span>
</button>
<div class="input-group-btn">
<input type="submit" class="btn btn-default" value="submit">
<button class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
I've used the above html to create the top button group. I would like to tweak it to achieve a button group more like the one underneath, where you don't have rounded corners on the right side of the widest button.
.full-width {
width: 100%;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.full-width span i {
margin-right: 10px;
}
In case anyone else is interested, adding these styles to my .full-width class did the trick. I'd be interested to see if anyone knows a Bootstrap 3 only way to do achieve the same appearance.
Related
I am trying to get a series of controls positioned vertically and centered horizontally. The controls are coming out fine, but when I cause the dropdown to drop down, the dropdown text appears left justified on the screen rather than under the centered dropdown control. I've spend a couple of hours on it and I can't get it right. Help would surely be appreciated. Here is what I am using:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">
</div>
You could solve this issue using css like i did here:
http://www.bootply.com/zck8H4EVt4
Just add this to your CSS:
.dropdown-menu {
left: 50%;
transform: translate(-50%, 0);
}
// EDIT:
Sorry, i've forgot about the btn-group class...
Just remove the CSS part from the first solution, add .btn-group to your dropdown and use .clearfix after your btn-group like i did here:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<div class="clearfix"></div>
<input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>
Working example: http://www.bootply.com/lryEFqtmdp
I have a standard bootstrap navbar, that collapse on mobile. Here below the code, for your reference:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu with dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu voice 1</li>
<li>Submenu voice 2</li>
<li>Submenu voice 3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I would like, after clicking on the hamburger menu on mobile, to get directly the 3 <li> "Submenu voice x" and hide the parent <li> (class="dropdown").
How can I achieve this result? Thank you
You can use CSS for this:
#media (max-width: 767px) {
.navbar-nav .dropdown-menu {
display: block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-toggle {
display: none !important;
}
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
color: #9d9d9d;
}
}
CODEPEN
I had to add the below to .navbar-nav .dropdown-menu in order to make it work.
opacity:1;
visibility: visible;
Try below code.
HTML:
<nav class="main-menu navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
<ul class="navigation clearfix">
<li class="current dropdown"><a routerLink="/">Home</a>
</li>
<li class="dropdown">About
<ul class="dropdown-menu">
<li>Company Overview</li>
<li>Vision Mission</li>
<li>Ethics & Core Values</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
.dropdown:hover > .dropdown-menu{
display: block;
}
I need to create a responsive nav with 2 rows of links. I would prefer to use bootstrap since it's already being used on the site. Any help to point me in the right direction would be greatly appreciated!
What I need it to look like
Just create something like this:
<nav>
<div class="container">
<div class="row">
<div class="col-md-*">
</div>
</div>
<div class="row">
<div class="col-md-*">
</div>
</div>
</div>
</nav>
Also just take a look at bootstrap's docs. Here is the link to Bootstrap's site
You need to spend some time looking at Bootstrap Navbar section also spend some time hacking around the examples and you will soon get the hang.
If you want a BIG, deep menu have a look at Yamm (yet another mega dropdown menu) or something similar. There are lots out there just search for bootstrap menus or dropdown menus... But the basic nav is very flexible.
After searching around for several hours, I was able to find a few different sources that ended up helping me figure it out.
Here's what my code ended up looking like. It's not perfect yet, but almost there.
Thanks everyone!
#nav-div { /*This is the div that wraps the entire logo and nav content*/
width:100%;
position: fixed;
top:0;
left:0;
z-index: 10;
margin: 0;
padding:0;
}
#nav-wrapper { /*This is the div that sizes the nav down to a col-md-9*/
padding:0;
margin:0;
}
#nav-container{
padding:0px;
}
#nav-top-row {
background-color: #6D6E70;
color: #fff;
padding: 0px 10px;
}
#nav-top-row a {
color:#fff;
padding-top:5px;
padding-bottom:5px;
font-size: 12px;
}
#nav-top-row a:hover {
background-color: #CCCCCC;
}
#nav-bottom-row {
background-color: #009578;
padding:0px 10px;
}
#nav-bottom-row a {
color:#fff;
}
#nav-bottom-row .dropdown-menu li {
background-color:#00806B;
}
#nav-bottom-row .dropdown-menu li a:hover {
background-color:#009578;
}
#nav-bottom-row li.dropdown.open a.dropdown-toggle {
background-color:#00806B;
}
#logo {
margin-top:35px;
width:90%;
max-width:250px;
margin-right:auto;
margin-left:auto;
}
#logo-div {
padding:0px;
background:rgba(255,255,255,.8);
}
.push-down { /*invisible div with no content that pushes down the main body content*/
margin-top:75px;
}
<div id="nav-div"class="">
<div id="logo-div" class="col-md-3">
<a href="#">
<img src="HM-Logo_Grn.png" id="logo" class="img img-responsive">
</a>
</div>
<div id="nav-wrapper" class="col-md-9">
<!-- Fixed navbar -->
<nav id="full-nav" class="navbar navbar-default">
<div id="nav-container" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
<!-- <a class="navbar-brand" href="#">Project name</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<div id="nav-top-row" class="row">
<ul class="nav navbar-nav navbar-right ">
<li>SERVICES</li>
<li>ACCESS REPORT</li>
<li>REQUEST INSPECTION</li>
</ul>
</div>
<div id="nav-bottom-row" class="row">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
COMPANY <span class="caret"></span>
<ul class="dropdown-menu">
<li>PRESS RELEASES</li>
<li>NEWSROOM</li>
<li>AWARDS</li>
<li>MEDIA ASSETS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>BUYERS</li>
<li>SELLERS</li>
<li>AGENTS</li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
<div class="push-down"></div>
I like bootstrap button group style, I don't like the active toggle. I can't disable the active state, unless I click out of the button.
How can I disable the button toggle?
can't find active class
<div class="btn-group" aria-label="..." style="margin-bottom: 20px;">
<button type="button" class="btn btn-primary" onclick="import_all_db(this)">import_all_db</button>
<button type="button" class="btn btn-primary" onclick="import_all_qcloud(this)">import_all_qcloud</button>
<button type="button" class="btn btn-primary" onclick="import_all(this)">import_all</button>
</div>
The CSS declaration you are looking for is .focus, :focus :
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
overrule that if you want to change it - as in the example -> http://jsfiddle.net/w7rzqLz3/ - you could set it to have the same background-color and border-color as the other states.
I'm absolutly stacked while trying to align item in bootstrap navbar vertically on both desctop and mobile view.
Does anybody can explain how to di it?
I need to align avatar and name to right side on desctop and mobile and centerd vertially in navbar.
Here the HTML code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<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 logo" href="#"><b>Super</b> logo</a>
</div>
<div class="nav navbar-nav navbar-right">
<ul class="unstyled">
<li>
<a href="/profile">
<img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt="">
<span class="hidden-xs">User name</span>
</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="main-nav">
<ul class="nav navbar-nav visible-xs">
<li><i class="fa fa-tachometer"></i> menu 1</li>
<li><i class="fa fa-wrench"></i> menu 2</li>
<li><i class="fa fa-sign-out"></i> menu 3</li>
</ul>
</div>
</div></nav>
and CSS
.navbar-toggle {
position: absolute;
left: 10px;
}
.logo {
width: 100%;
padding: 15px 0;
text-align: center;
height: 20px;
}
.img-rounded {
height: 35px;
width: 35px;
border-radius: 50%;
}
.unstyled li {
list-style: none;
}
.unstyled a {
text-decoration: none;
}
#media only screen and (min-width: 768px) {
.logo {
width: 150px;
}
}
Here is a wrong eximple.
http://www.bootply.com/zh0J2u4KUU
updated use this
#media (max-width: 767px)
{
ol, ul{margin-top:6px; margin-right:302px;
}
<ul class="unstyled pull-right">
<li>
*******
</li>
</ul>
change the logo class to pull-right!