I'm trying to remove the outline and background color form mobile-menu[Hamburger menu].I only want the horizontal 3 line without outline and background color.
Here is what i'm trying but it's still showing the outline when not hover/focused.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html">abc</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</div>
</div>
</nav>
And this is css i'm applying
.navbar-default{
background-color: #862f38;
}
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
#media screen and (max-width: 768px){
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
But i don't know why it's not working.
Thanks in advance for the help
You can try the below simple code
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background-color: transparent;
}
.navbar-default .navbar-toggle{
border-color: transparent;
}
You need to add css to .navbar-toggle
.navbar-default{
background-color: #862f38;
}
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
#media screen and (max-width: 768px){
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
.navbar-toggle{
border:none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html">abc</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</div>
</div>
</nav>
Try this code, this will give only three horizontal lines, This works fine for me
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.navbar{
background:#ddd;
}
.navbar-inverse .navbar-toggle {
border-color: transparent !important;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 8px;
padding: 9px 10px;
position: relative;
}
</style>
</head>
<body>
<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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
.navbar-inverse .navbar-toggle {
border-color: transparent !important;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 8px;
padding: 9px 10px;
position: relative;
}
You want this?
.navbar-default{
background-color: #862f38;
}
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
#media screen and (max-width: 768px){
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
background:none !important;
border: none !important;
outline: none !important;
}
.navbar-default .navbar-toggle {
border-color: transparent !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html">abc</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Just add css in navbar-toggle:
.navbar-toggle{
border:none;
background:none;
}
Here is working demo: https://jsfiddle.net/q0uxe6t0/
Related
I am trying to create a responsive website: when resizing the window, you get the "mobile" view. So a button appears. By pushing on the button you can toggle the navigation bar (make it appear and disappear).
This website does this very well: https://blackrockdigital.github.io/startbootstrap-freelancer/
So I tried replicating this behaviour myself:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
/**
* Navigation bar.
*/
#myNavbar
{
padding-top: 1.5rem;
padding-bottom: 2.5rem;
background-color: rgb(100, 100, 100);
}
#navbarResponsive
{
width: 65%;
}
.navbar-collapse
{
flex-basis: 100%;
flex-grow: 1;
}
.nav > li > a
{
font-size: 18px
}
.navbar-brand
{
font-size: 28px;
}
img
{
height: 70px;
width: 70px;
float: right;
margin-top:-20px;
margin-left: 20px;
}
.navbar > .container, .navbar > .container-fluid
{
display: flex;
justify-content: space-between;
}
#media (min-width: 900px)
{
.navbar-toggler
{
display:none;
}
}
.container
{
width: 100%;
}
button
{
background-color: transparent;
}
.bg-primary
{
background-color: transparent;
}
.navbar-toggler-icon
{
background-color: transparent;
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
Everything seems ok, but when pushing the button the navigation bar (Home - Services - Partners - Contact) does not appear on the next line but rather on the same line and everything gets shifted to the left: https://imgur.com/a/8JU2oKT
Could someone tell me why the navigation bar is not displayed on the next line?
From a quick glance at your code the css seems not to be the problem, rather the placement of your div's. Try to replace the HTML to this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I replaced the div with the actual menu inside, outside of the container div but still inside the nav.
Try this code;
HTML
<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
☰
</button>
<a class="navbar-brand" href="#">
<img class="img-rounded" src="images/testLogo.png">
</a>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="main.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Partners</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
CSS
#media (max-width: 62em) {
.navbar-nav {
padding-top: .425rem;
padding-left: 0.75rem;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-brand {
float: right;
}
.navbar-brand,
.navbar-nav .nav-item {
display: block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.dropdown-menu {
position: relative;
float: none;
}
}
I am trying to use bootstrap so that i can make a line break between each of my nav menu.
For example:
Hi | Hi1 | h3
I need it so that the bar at the end also does not show after h3.
I have tried this so far but its not working, its pushing all the nav functions down to the bottom.
HTMKL:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
<div class="logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Become A member</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar-default .navbar-nav > li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
height: 2.5em;
}
For some reason it does create the lines but it pushs all my texts down. Thanks for all the help.
Here's an example of how you can do this with pseudo elements (:after). You dont need the positioning rules your currently using (which are the cause of your misaligned links). Use position: absolute and apply a height.
As far as the last li, use :last-child:after to remove the border.
See MDN Pseudo-elements
Working example Snippet (with Active class)
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Working example Snippet without Active
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Example Snippet Mobile
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
top: 25%;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li:after {
right: 0;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
This can be achieved by setting borders.
HTML:
<ul class="navbar-nav mr-auto">
<li class="nav-item">
About us
</li>
<li class="nav-item">
Our Services
</li>
<li class="nav-item">
Solutions
</li>
<li class="nav-item">
Contact
</li>
</ul>
SCSS
.navbar-nav {
li.nav-item {
.is-active {
color: $blue;
border-bottom: 2px solid $violet;
}
.nav-link {
margin: 0 8px;
padding: 0;
}
// for nav navbar-expand-lg
#include media-breakpoint-up(lg) {
border-right: 2px dotted $black;
&:last-child {
border-right: none;
}
}
}
}
This will display a border line to the right, also hides for the last.
This is so inane but I it might help someone else. I had <br> blending in after the navbar item link, and it took me forever to spot. Be wary of any errant <br> tags!
I have one navbar in one website that im building which is full width in large screen.
I am trying to make it in my own width for large screens and im stuck.
i have the code here
.navbar {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar a {
color: #cccccc !important;
}
.navbar a:hover {
color: #ffffff !important;
background-color: #646464 !important;
}
.navbar-header .navbar-brand {
color: white !important;
font-size: 1.5em;
}
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
Do you have any suggestion of how can i make it lets say 800px for wide screens
and when its loaded in tablet to be normal width of all the tablet/smartphone screen?
This might be the simplest way to do this: you can limit the container size with a custom class at whatever media query you'd like the navbar with be 800px, then just adjust the custom container color to the navbar color and the navbar background color so it matches the body or use transparent.
See working example.
body,
html {
margin-top: 55px;
}
.navbar.navbar-custom {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
color: #ffffff;
background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
color: white;
font-size: 1.5em;
}
#media (min-width: 1200px) {
.container.container-nav {
width: 800px;
background-color: #242424;
}
.container.container-content {
width: 800px;
}
.navbar.navbar-custom {
background-color: transparent;
border: none;
}
}
<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" />
<body>
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Work
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>News
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container container-content">
<div class="alert alert-warning">Hello</div>
</div>
</body>
i'm currently working on a project right now regarding bootstrap.. I'm having a hard time figuring this one out.
I have a navigation which I need to collapse early around 1200px but when I do so, the links are overflowing like this:
I dont know what was the reason behind this. But I'm using bootstrap.min.css which I know is different in bootstrap.css alone. Can anyone help me with this ?
And BTW, here's a snippet on what I have already done in my navigation:
.navbar-default .navbar-header {
float: none;
}
.navbar-default .navbar-left,
.navbar-default .navbar-right {
float: none !important;
}
.navbar-default .navbar-toggle {
display: block;
}
.navbar-default .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-default.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-default .navbar-collapse.collapse {
display: none!important;
}
.navbar-default .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-default .navbar-nav>li {
float: none;
}
.navbar-default .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-default .collapse.in {
display: block !important;
}
<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" />
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<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>
<div class="brand-pad"></div>
<a class="navbar-brand" href="index.html">
<img src="images/logo_white.png" alt="logo" width="210px" height="90px">
</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<div id="socialicon" class="collapse navbar-collapse navbar-right">
<ul class="navbar-rights ">
<li class="icon-margin-left icon-margin-right">
<a class="twitterBtn smGlobalBtn" href="http://twitter.com/"></a>
</li>
<li>
<a class="facebookBtn smGlobalBtn" href="http://facebook.com/"></a>
</li>
</ul>
</div>
<br>
<ul class="nav navbar-nav nav-pad">
<li class="scroll active">HOME
</li>
<li class="scroll">ABOUT
</li>
<li class="scroll"><a class="services" href="#services">OUR SERVICES</a>
</li>
<li class="scroll"><a class="collection" href="#portfolio">OUR COLLECTION</a>
</li>
<li class="scroll">BECOME A MEMBER
</li>
<li class="scroll">OUR PARTNERS
</li>
<li class="scroll">CONTACT
</li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
<!--/header-->
Thanks in advance..
Hope you can help - I left this issue on the backburner for a while now. It started when I was trying to recolor the default bootstrap navbar...but then I got in a mess and removed all the css to go back to default....and now the navbar toggle icon for the mobile size viewport has disappeared (it still exists but I can't seem to find why it's invisible(!). I've tried fiddling around with CSS to 'color' it but I'm having no luck...
Thanks in advance!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="navbar navbar-custom" role="navigation">
<div 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Store</li>
<li>Events</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span>User<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
</html>
Your CSS for .navbar-toggle has transparent values set for the color of the toggle button.
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
See how both "background-color" and "border" are both transparent? That means they're invisible. Add some color to these selectors and I think you'll be on your way.
Like so:
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: black;
background-image: none;
border: 1px solid red;
border-radius: 4px;
}
/* GIVE THE BARS SOME COLOR TOO */
.icon-bar {
background: white;
}
Hope this helps.
FIDDLE HERE
You can control background color like this
.navbar-header{
background-color:red;
}
Working fiddle
http://jsfiddle.net/52VtD/8983/