Customize Navbar Collapse button - html

How can i change the color of the collapse button there? and the white lines like the divider. here is the picture. Can someone help me? im new to css,bootstrap and html so please help me. or give me some ideas.
Here is my code.
<nav class ="navbar navbar-default" role= "navigation">
<div class = "container">
<div class ="navbar-header">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active">Students</li>
<li class="nav-divider"></li>
<li>Faculty</li>
<li class="nav-divider"></li>
<li>About us</li>
<li class="nav-divider"></li>
<li>Contact us</li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css.
#fot{ position:fixed;
bottom:0;
}
.navbar-default{
background-color:rgb(193,57,45);
}
.navbar .nav > li > a{
color:#ffe6e6;
}
.navbar .nav > li > a:hover{
color:#000000;
}
.navbar .nav .active > a{
background-color:rgb(193,57,45);
color:#000000;
}
.navbar .nav .active > a:hover{
background:none;
color:#fff;
}
.nav .nav-divider{
height: 50px;
margin: 0 10px;
border-right: 1px solid #a92419;
border-left: 1px solid #c1392d;
}
#media(max-width: 768px)
{.nav .nav-divider{
height: 1px;
margin: 0 10px;
background-color:#a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;
}

I guess this is what you are looking for:
.icon-bar
{
background:green !important; /*Whatever colour you want for icon lines*/
}
.navbar-toggle
{
background:yellow !important; /*Whatever colour you want for background */
}
In the CSS !important forces to apply property aside it over actual properties of Bootstrap CSS.
Update: In your CSS ADD Following code:
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: darkblue; /* Whatever Colour you want */
}

Yes ofcourse...just define some css on button class like this
CSS
button.navbar-toggle{
background:none;
border:none;
color:#000;
// and so on according to what style u want...
}
button.navbar-toggle span{
background:#000;/*change accordingly*/
// these span are for white line you can edit the lines in this css
}

Related

Bootstrap Menu <li> changes color when mouse shifts to the dropdown content

In my navigation links when I hover over a particular <li> the background color changes. That's what I want. But when I shift the mouse cursor to its child menu list (drop down content), the background color of the parent <li> changes to something else. I tried giving !important on its focus, before, after, active everything but nothing seems to work. When I hover on that particular <li> to get the sub menu the background color changes fine but when I move over to the sub menu its background color changes again. Also, please note that when I shift my cursor to the next <li> item its still working fine. The problem is occurring only when my cursor goes down to the dropdown menu. I am using Bootstrap v3.3.6.
CSS
#category-navi .cats-menu {
width: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
margin-top: 60px;
z-index: 100;
border-top: 1px solid rgba(0,0,0,0.5);
}
.parent-menu .navbar-collapse {
padding-left: 0px;
}
.parent-menu .nav li > a:hover {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
.parent-menu .nav li > a:after {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
.mega-dropdown {
position: static !important;
}
.dropdown-toggle a:hover {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: underline;
background-color: none !important;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.dropdown-toggle {
color: #fff;
}
.mega-dropdown ul {
margin-top: -1px !important;
margin-left: -1px !important;
border-top: none !important;
}
HTML
<section id="category-navi">
<div class="cats-menu" id="cats-menu">
<div class="container">
<div class="parent-menu">
<nav class="navbar">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
{foreach from=$cats item=cat}
<li class="dropdown mega-dropdown">
{$cat.name} <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
{foreach from=$cat.categories item=subcat}
<li class="col-sm-3">
<ul>
<li class="dropdown-header">{$subcat.sc_name}</li>
{foreach from=$subcat.ccname item=childcat}
<li>{$childcat.cc_name}</li>
{/foreach}
</ul>
</li>
{/foreach}
</ul>
</li>
{/foreach}
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>
</div>
</div>
</section>
change: .parent-menu .nav li > a:hover
to: .parent-menu .nav li > .dropdown-toggle:hover

Aligning a navbar

I just created a a navbar and a hover feature.But the problems are now that when I hover on HOME,BEDROOMS and CONTACT US,the color has no effect entirely from top to bottom on the navbar...but on the others(Eg: FACILITIES SERVICES) the color has full effect.
HTML
<nav class="navbar">
<div class="container">
<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> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" style="padding-top:10px">
<li><span class="details"><strong>Phone</strong> </span><span class="contacts">021 913 0643</span></li>
<br/>
<span class="details"><strong>Email</strong> </span> <a class="contacts" href="#">info#acaciahouse.co.za </a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><span ></span>Home</li>
<li><a href="#"><span ></span> FACILITIES<br/>
SERVICES</a></li>
<li>BEDROOMS</li>
<li><a href="#">RATEs <br/>
& BOOKINGS</a></li>
<li><a href="#">SURROUNDING<br/>
ATTRACTIONS</a></li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
padding: 0 px;
background: #331a00;
padding-left:12px;
padding-right: 12px;
border: 0px;
}
.navbar ul.navbar-right li a{
color: #ffffff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding-top: 30px;
padding-bottom: 20px;
margin:0;
text-align: center;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
Check fiddle here
I have to used min-height: 90px; to .navbar-nav.navbar-right li and display property for .navbar-nav.navbar-right li and .navbar-nav.navbar-right li a.
To make text vertically middle use below css.
Updated CSS
.navbar{
background: #331a00;
}
.navbar ul li a{
color: #ffffff !important;
text-transform: uppercase;
}
.navbar .navbar-default {
background:none;
border:0;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
#media (min-width: 768px){
.navbar ul li a{
text-align:center;
}
.navbar-nav.navbar-right li{
display:table;
min-height:90px;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
#media (max-width: 767px){
.navbar-nav.navbar-right li{
display:table;
width:100%;
min-height:60px;
}
.navbar-collapse{
max-height: inherit;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
Check Updated Fiddle
Surely this CSS code works perfectly:
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.navbar{
background: #331a00;
}
.navbar ul li a{
color: #ffffff !important;
text-transform: uppercase;
}
.navbar .navbar-default {
background:none;
border:0;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
#media (min-width: 768px){
.navbar ul li a{
text-align:center;
}
.navbar-nav.navbar-right li{
display:table;
min-height:90px;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
#media (max-width: 767px){
.navbar-nav.navbar-right li{
display:table;
width:100%;
min-height:60px;
}
.navbar-collapse{
max-height: inherit;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}

Customizing Navbar collapse button when hover

How to remove the background of the collapse button when the mouse hover to the button. here is the picture. I really want to remove that white background when mouse hover to that button please help me. Im new to html and css and also to bootstrap.
Here is my html code
<nav class ="navbar navbar-default" role= "navigation">
<div class = "container">
<div class ="navbar-header">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active">Students</li>
<li class="nav-divider"></li>
<li>Faculty</li>
<li class="nav-divider"></li>
<li>About us</li>
<li class="nav-divider"></li>
<li>Contact us</li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css code.
#fot{ position:fixed;
bottom:0;
}
.navbar-default{
background-color:rgb(193,57,45);
}
.navbar .nav > li > a{
color:#ffe6e6;
}
.navbar .nav > li > a:hover{
color:#000000;
}
.navbar .nav .active > a{
background-color:rgb(193,57,45);
color:#000000;
}
.navbar .nav .active > a:hover{
background:none;
color:#fff;
}
.nav .nav-divider{
height: 50px;
margin: 0 10px;
border-right: 1px solid #a92419;
border-left: 1px solid #c1392d;
}
#media(max-width: 768px)
{
.nav .nav-divider{
height: 1px;
margin: 0 10px;
background-color:#a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #a92419;
}
}
You need to specify the background-color for both hover as well as focus.
You can do that by adding this to your CSS:
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background: none;
}
Here's a jsFiddle with the above code: https://jsfiddle.net/AndrewL32/mowb6gcb/
use this css which works on hover
button.navbar-toggle:hover{
background:none;
/* other css as you requirment*/
}
This is the normal, straight forward way, using the psuedo class :hover to add a css style to items upon hovering the mouse over them
button.navbar-toggle {
background: #ccc; //a gray background as default
}
button.navbar-toggle:hover {
background: none; //no background when you hover over the button
}

Collapsed menu in Navbar: removing transparent margin from list elements?

I've been searching for a few hours on this and poured over the bootstrap code to no avail so here I am! I set my navbar to collapse at 991px and, once viewed, the list elements have the background color I wanted, but when you hover over them there's apparently a transparent margin for each list element. How would I get rid of this margin, i've been messing with navbar-nav li a and my links in the navbar are H5s so also navbar-nav li a H5. The last list element is a dropdown link and in the media query when clicked it remains as if hovered over so I'm assuming there's a focus tag with it I just can't think exactly how to fix these two things (still very new to CSS/Bootstrap if you didn't know). Here is the HTML below and any help is very much appreciated!
<nav class="navbar navbar-default navbar-fixed-top">
<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="#topFixedNavbar1" 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="#">Logo</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right links">
<li><h5>How We Work</h5></li>
<li><h5>Abous Us</h5></li>
<li class="dropdown"><h5>Course Subjects</h5><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<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 -->
And here is the CSS (I included the whole file, but I'm pretty sure the problem will have to do with the media query):
body{
padding-top: 120px;
background-color:#34A0CD;
}
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#topFixedNavbar1{
height:120px;
}
.links{
height:120px;
}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
#media (max-width: 991px) {
.dropdown li a{
line-height:30px;
}
.collapse.navbar-collapse{
width:100%;
}
.links li a{
width:100%;
}
.navbar-header {
float: none;
}
.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.in {
overflow-y: visible;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav li a h5{
line-height: 30px;
background-color: gray;
color: #F1E9E9;
}
.navbar-nav li a{
background-color:gray;
width:100%;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
I forked into a Fiddle that was created with Bootstrap in mind and threw in your code so I think I might have reproduced the issue. The problem didn't seem to be margins at all but background color that is set to transparent on hover/focus by default in Bootstrap.
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: rgb(51, 51, 51);
background-color: transparent;
}
I tested out just a simple modification to this with to override the default styles and it seemed to work.
.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus{
background-color: gray;
}
Here's a demo
Obviously you can modify that however, but that should put you on the right track.

Customized Bootstrap Navbar Responsive Problems

I have created a vertical navbar that has issues with the toggle feature when becoming a horizontal bar on a mobile device. I've tried to get around it several times, and I've ended up creating a separate style sheet for the mobile version. However, now it interferes with desktop version, and if I try to hide the mobile version, the toggle feature stops working.
I'm sure there must be an easier way to do this, but I haven't found anything that's worked.
HTML
Toggle navigation
KEDEV
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse-ex1-collapse" id="navbar-collapse-ex1-collapse">
<ul class="nav navbar-nav-mobile">
<li>
<img class="icon" src="home.png">
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- End Mobile Nav -->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-right" role="navigation">
<div class="container">
<!-- 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-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="#about">KEDEV</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a mouseover="buttonPress('1') class="menu-button" id="aboutButton" data-toggle="tooltip" data-placement="right" title="About" href="#about"><img class="icon" src="home.png"></a>
</li>
<li>
<img class="icon" src="services.png">
</li>
<li>
<img class="icon" src="portfolio.png">
</li>
<li>
<img class="icon" src="contact.png">
</li>
</ul>
<ul class="nav navbar-nav social">
<li>
<img class="iconSO" src="twitter.png">
</li>
<li>
<img class="iconSO" src="linkedin.png">
</li>
<li>
<img class="iconSO" src="blogspot.png">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS
/* MobileNav*/
.navbar-mobile {
display:none;
}
.mnavbar-header{
display:none;
}
.navbar-fixed-top{
display:none!important;
}
/*Navigation*/
.container {
width:100%;
margin:0 auto;
padding:0;
border-sizing:border-box;
}
.navbar {
margin-bottom:0;
z-index:31;
position:fixed;
float:none;
display:block;
}
.navbar-collapse {
height: 100%;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
float:none;
display:block;
}
.navbar-collapse.collapse {
display: block !important;
width:100%;
overflow: visible !important;
margin-bottom:0px;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;
left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-brand {
color:white;
margin-bottom: 6em;
font-size:2em;
}
.navbar li {
margin: 0.5em 0.5em 0.5em 0.5em ;
position:relative;
}
.icon {
width:2em;
height:2em;
}
.social {
margin-top:20em;
}
.social li {
display:inline-block;
margin: -1em -1.3em -2em -1.1em ;
}
.iconSO {
width:2.3em;
height:2.3em;
}
/* Media Query */
#media (max-width: 767px) {
.navbar {
display:none;
}
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
}
.mnavbar-header{
display:block!important;
overflow:visible;
}
.navbar-fixed-top {
display:block !important;
overflow:visible;
}
.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0.6) !important;
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
position:fixed;
left:0;
width:100%;
height:100%;
overflow:visible;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
overflow: hidden !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
body {
padding-left: 0;
padding-right: 0;
}
}
Here, This should do the trick.
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Thank you for your suggestions. I have worked with it a few more hours and found an answer.
I deleted quite a bit of my media query CSS and added an overflow:hidden to my .navbar-mobile.
#media (max-width: 767px) {
.navbar-mobile {
display:block !important;
height:auto;
width:auto;
background-color: rgba(0, 0, 0, 0.6) !important;
overflow:hidden;
}
.mnavbar-header{
display:block!important;
}
.navbar-collapse-ex1-collapse {
float: left;
margin-top: 0;
margin-bottom: 0;
}
#navbar-collapse-ex1-collapse {
left:0;
width:100%;
height:100%;
display:block ;
}
.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
}
.collapse.navbar-collapse-ex1-collapse {
background-color: rgba(0, 0, 0, 0,1) !important;
}
.navbar-brand {
margin-bottom:0;
display:block;
}
.navbar li {
font-size:2em;
text-align:center;
display:inline;
}
.navbar-collapse-ex1-collapse {
display:block;
}
}
I'm still working on tweaking the transparency and background, but now the toggle works!