Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
Related
I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?
main.html
<div class="col-md-10">
<nav class="navbar navbar-default container-panel">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-file"></span><span class="caret"></span>
<ul class="dropdown-menu">
<li><span ng-click="createXml()">Create new BPMN Diagram</span></li>
</ul>
</li>
<li><span class="glyphicon glyphicon-folder-open"></span></li>
</ul>
</div>
</div>
</nav>
</div>
main.css
.navbar.container-panel {
width:554px;
margin-left: 760px;
}
Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.
.navbar.container-panel {
width:60vw;
margin-left: 760px;
}
or
.navbar.container-panel {
width:60%;
margin-left: 760px;
}
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I need move bootstrap elements of row div to the bottom of the page and make it responsive.
I tried add position:absolute to row class, but didn't worked so well.
How can i do this?
jsfiddle
I assume you are trying to absolutely position the element with the id bottom-list.
In order to make it go to the bottom of the page add
bottom:0;
to the selector.
In this way you specify the offset of the absolutely positioned element from the bottom of the containing element.
If however in your layout one of the parent elements has a CSS property
position: relative;
then this may work differently.
Hence I suggest the outermost container element i.e. .container must be absolutely positioned with bottom:0;
Edited fiddle: https://jsfiddle.net/fz93cgxd/4/
If you need to have a Responive bootstrap navbar fixed on bottom you may need to start with Bootstrap navbar itself then add your custom style on it
like
<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 rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<nav class="navbar navbar-default nav-justified fixed-bootm navbar-fixed-bottom">
<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="#bs-example-navbar-collapse-1" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-tabs nav-justified">
<li class="active">01 INTRO <span class="sr-only">(current)</span></li>
<li>02 WORK</li>
<li>03 ABOUT</li>
<li>04 CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Note: all those code is with bootstrap style I didn't write a single line of CSS
Now you can start adding your custom styles
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<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="#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="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.
I'm working on building a website with bootstrap, and I have a navbar fixed to the top of the window. I'm trying to make the abbreviated logo (BLM) on the left of the bar transparent through the letters and the navbar (so that whatever is on the page can be seen through the letters).
Anyone know what css (or html) needs to be added to do this?
Below is my navbar code:
<!-- Fixed navbar -->
<div class="navbar navbar-inverse 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" href="#">BLM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
The Team <span class="caret"></span></li>
<ul class="dropdown-menu" role="menu">
<li>PersonA</li>
<li>PersonB</li>
<li>PersonC</li>
<li>PersonD</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The part I'm talking about making transparent through to the page is
<a class="navbar-brand" href="#">BLM</a>
I can use CSS to make the navbar-brand transparent, but then it's just black because the navbar is black (and I don't want the navbar to be transparent).
In this example, I want to be able to see the red wall through the BLM letters
Thanks for any help/thoughts!!
Unfortunately, there is no CSS feature (yet) that does what you want it to do while being cross-browser compatible. However, the solution to your problem is easy.
Replace your logo with a .png with transparent letters and a semi-transparent background that matches the rest of the navbar. Shuffle around your divs so that your logo and the rest of the navbar are separate elements, and you're done!
Try opacity and a value of a decimal.
.navbar-brand {
opacity: 0.5;
}