How can I remove this border in the top when I open the collapse menu on boostrap? I tried used this :
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border:0 !important;
}
but the border still there, someone know how can I remove it? thanks
jsfiddle:
http://jsfiddle.net/x2pL74aw/3/
html:
<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="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>
css:
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border:0 !important;
}
Remove box-shadow & border-color from .navbar-collapse. Like:
.navbar-collapse {
box-shadow: none;
border-color: none;
}
Have a look at the snippet below:
.navbar-collapse {
box-shadow: none !important;
border: none !important;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Hope this helps!
Also set box-shadow to none
border: 0 !important;
box-shadow: none;
Related
I have this HTML for navbar and I need to change the background color for the .active class.
<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" id="white" href="#">TableMailerMM</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>-->
</div>
</div>
</nav>
What I have tried is,
.nav.navbar-nav li:active{
background-color: #ff812c;
}
but it doesn't work, any ideas?
Try using
.nav.navbar-nav li.active a{
background-color: red;
}
.nav.navbar-nav li.active a {
background-color: #ff812c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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" id="white" href="#">TableMailerMM</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You're using :active pseudeselector which doesn't apply here use .active class selector and select descendant anchor like :
ul.nav.navbar-nav li.active a {
//styles
}
https://jsfiddle.net/94yqf9sa/4/
:active is about state of element.
.active is about class of element.
I have a navbar in my Page like this:
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>
When I apply this CSS:
.collapse ul li {
color: #ffffff;
}
Isn't the li supposed to change color?
It's still the usual color. Why is this?
You just need to tweak your selectors
.collapse ul.navbar-nav>li>a {
color: red;
}
.collapse ul.navbar-nav>li {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>
There is predefined background image property in bootstrap theme css
background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)
This is preventing your background-color to apply.
So, Add background-image:none; to .navbar.navbar-default.
try to a tag change color to
.collapse ul li a {
color: #ffffff;
}
Just for changing the color. If you want some other changes you can style it.
.collapse ul li a {
color: red;
}
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>
Thank you for reading and answering my question. What I would like to do is have my links underlined once it is hovered. Without background color and with space between text. Sort of something like this using bootstrap. enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internship Exercise 1</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="img/logo.jpg" alt="logo" width="90%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
With CSS here that have a temporary underline for active. How can I do this for hover? Looking forward to your answer. Thanks!
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.underline {
border-bottom: solid 1px #ffffff;
display: inline;
padding-bottom: 2px;
}
Well that's why :hover exists :)
HTML:
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" alt="logo" height="100%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS:
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar{
background:pink!important;
padding:10px;
}
.navbar li *:hover{
color:red!important;
}
.navbar li:hover{
border-bottom:3px solid white;
}
Here is a working fiddle: https://jsfiddle.net/dp17vjus/
On this bootstrap starter template:
when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:
I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.
How to do that?
This is the source code of the template:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
It's all in the CSS.
See this post and check out the css column.
Always Collapse Bootstrap Nav
Working Example:
.navbar .navbar-header {
float: none;
}
.navbar .navbar-toggle {
display: block;
}
.navbar .navbar-collapse.collapse {
display: none!important;
}
.navbar .navbar-nav {
float: none!important;
}
.navbar .navbar-nav > li {
float: none;
}
.navbar .navbar-collapse.collapse.in {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
I want my menu to be hidden and when i hover an image i would like the menu to appear. I've tried following something that i've seen here in Stackoverflow but it's not working. How do i do it only with css ?
Html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<img src="img/ea.PNG" class="img-responsive img-center" id="imgmenu">
CSS:
.navbar{
display:none !important;
}
#imgmenu:hover + .navbar{
display:block;
}
First you must place the image before the Menu , look this example (without js):
.navbar{
display:none;
margin-top: -10px;
padding-top: 10px;
position: relative;
}
#imgmenu:hover + .navbar{
display:block;
}
.navbar:hover{
display:block;
}
<div id="main-menu">
<img src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" class="img-responsive img-center" width="50px" height="50px" id="imgmenu">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
</div>