I'm having a bit of a problem with the Bootstrap nav I've placed on a website I'm making.
When collapsed on smaller screens, the drop down navigation menu doesn't span 100% of the screen - It looks as if there's a 1px gap on either side of the menu and I can't seem to figure out how to fix this.
** EDIT **
Due to bad markup in my original post - I've updated this (still having probelems, but this represents my problem better) at JSFIDDLE
<div class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="fa fa-bars fa-2x"></span> Menu</button>
<span class="logo"> Logo</span>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Book A Repair </li>
<li>About </li>
<li>How it Works </li>
<li>Testimonals </li>
<li>Contact </li>
</ul>
</div>
</div>
It's happening because of the Bootstrap margin on the .navbar-collapse.. which is a negative margin of 15px. Just move it out a pixel on each side:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}
Bootply
Related
I do have a bootstrap#3 navigation bar in my Angular 7 project.
nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" routerLink="/">
<div class="container" style="padding-left: 0px; padding-right: 0px; height: 20px; width: 40px">
UTCN
</div>
</a>
<div class="navbar-brand" style="margin-left: 3px;"><i class="fas fa-bars"></i></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<ng-template [ngIf]="!authService.isAuthenticated()">
<li routerLinkActive="active"><a routerLink="/signup">Register</a></li>
<li routerLinkActive="active"><a routerLink="/signin">Login</a></li>
</ng-template>
</ul>
</div>
</div>
</nav>
I need to obtain a responsive behaviour, but the right side content, the div element with class 'nav navbar-nav navbar-right' is dissapearing when screen size is small (xs).
How can i make the that div to use the left-side available space and not vanishing?
I have a little problem, i got bootstrap navbar set up, but when i resize it to the tablet width, menu escapes the navbar and gets into content like shown here:
http://oi57.tinypic.com/2uykv9g.jpg "see the problem"
Is the menu too wide ? Any help how to fix this would be greatly appriciated.
Code here:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="active"><i class="fa fa-home"></i></li>
<li>Packages</li>
<li>Examples of webpages</li>
<li>Our Services</li>
<li>Benefits</li>
<li>References</li>
<li>Contact </li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
Ok i fixed it, so in case somebody else is having that problem, all i did was scale down the logo (which was partially the problem) to 80% on devices smaller than 992px, gave it an absolute positioning etc, here is the css:
#navbar-height: 150px;
#navbar-brand-vpadding: 10px;
.navbar-brand img {
height: #navbar-height - #navbar-brand-vpadding * 2;
position: absolute;
top: #navbar-brand-vpadding;
}
#media (max-width: 992px) {
.make-custom-class-here {
width:201px;
height:41px;
}
}
I am using bootstrap 3. I have a transparent navigation bar and a background image. When my resolution is smartphone or tablet view my meny bar collapses into a button. When I click the button my menues pop up. However, because my parent elements is transparent my navbar-collapse is transparent too and the menu links are not well seen against the background image. which property do I need to use to make my collapsed menu a solid white color?
<header class="container">
<div class="bg"> <!--Background Image-->
<div class= "number">
<div class="number-wrapper">
<span id="tel">(123) 456 7890 </span>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<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=".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>
<img src="images/logo2.png" class="img-responsive" alt="Sample Image"/>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Contact Us</li>
<li class="dropdown">
<span style="color: #27A9E1">Menu 4 </span><span class="caret" style="color: #27A9E1"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!--The end of the menu bar-->
</div>
</header>
CSS:
nav.navbar.navbar-default {
border-top: none;
background-color: #FFFFFF;
opacity: 0.7;
}
Opacity on the enclosing elements is not the way to go, because once you declare opacity, all enclosed elements will inherit the same opacity, which can't be reversed. Solution? Use the alpha channel on the background-color, like so
background-color: rgba (256,256,256, 0.7)
Example: http://www.bootply.com/s92TKwxRMg
You'll see I also declared it on the dropdown, assuming that's what you're after.
You can try like this
#media (max-width:480px) {
body > .navbar-default {
background-color: #2c3e50;
}
}
so this code will add the navbar-default with color when the page was resize until reach 480px. hope this will help.
I have markup defined in the page as below:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="collapse navbar-collapse">
<ul class="nav navbar-nav nav-pills">
<li class="active">Home
</li>
<li>Companies
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="breadcrumb">
<li>Home
</li>
<li>About
</li>
<li class="active">Help
</li>
</ul>
</div>
</div>
When the page renders the breadcrumb hides behind the navbar. Any bootstrap way of fixing it? Or is this a bug?
Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/
It is clearly defined in bootstrap documents itself as below:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
So, give 50 or more pixels of padding to the body to solve the issue. check this fiddle.
Make sure to include this after the core Bootstrap CSS.
body {
padding-top:60px
}
I'm creating a Site using Twitter Bootstrap 2.0.4 + bootstraps responsive.css. What I don't know is: Is it possible to have a logo appearing at the top left of the site and the navbar appearing on the right of the logo (but fixed at top)? While changing Sizes, the Logo should then appear on top of the navbar.
Would be really nice to get an answer for I haven't found anything helpful yet.
Greetings,
Dominik
edit: Here's a picture describing what I want to achieve: http://i.imgur.com/HX3ZM.png
Logo on the left, then navbar.
Okay, I got it. I used the fixed navbar, which didn't work as expected. You have to use a static navbar. Then you could just use the row / scaffolding system from bootstrap.
Example code for a logo left from the navbar:
<div class="row-fluid">
<div class="span3">
<p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
</div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div><!-- end navbar -->
</div><!-- end span8 -->
</div><!-- end row -->
To make my Logo responsive, I added the following css rules:
.responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;
}
Yes, sure—you will need to re-structure your document to place (for example) a div with the span4 class above the navbar.
Below that, have the navbar code and remove the branding elements (which usually house your logo). My assumption leads me to believe you want something like this:
If you can be a bit more specific about what you want, and/or provide the relevant parts (HTML) of your site, I can likely give some more direction.