I'm trying to make sidebar fixed in bootstrap along with navbar and header.
I have the following structure:
<html>
<head>...</head>
<body>
<div class="page-header custom-header">
<center>
<h1>Example Page Header</h1>
</center>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
....
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<div class="container-fluid">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<br/><br/><br/>
<div id="page-content-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:lavender;">...</div>
<div class="col-xs-7" style="background-color:lavenderblush;">...</div>
<div class="col-xs-6" style="background-color:lavender;">...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The sidebar and navbar can be made fixed, while with header I face problems. If navbar is fixed, header is scrolled down with the content. I tried adding
top: 0;
position: fixed;
But it only resulted in sidebar overlapping the header.
Here is my jsfiddle. Any help is appreciated.
Here is a good start by changing the following CSS:
.page-header {
padding: 20px 0 20px;
border-bottom: 1px solid #eee;
position: fixed;
top: 0;
margin: 0;
background: #fff;
width: 100%;
display: block;
z-index: 1;
}
#wrapper.toggled {
padding-left: 250px;
margin-top: 100px;
}
It will still take some adjusting to the different viewports, start with the mobile then style up.
https://jsfiddle.net/fyzyc54k/4/
Related
I am trying to navigate to div element from href.
It works fine but when i am adding the href in navigation bar of bootstrap it is not working.
If i remove the navigation bar then it works fine.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse"><i></i></a>
<div class="navbar-brand text-center"> <img width="114" height="64" src="style/images/logo.png" alt="" data-src="style/images/logo1.png" data-ret="style/images/logo#2x.png" class="retina" /> </div>
<!-- /.navbar-brand -->
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
<li>Elements</li>
<li><i class="icon-heart-1"></i><span>Elsewhere</span></li>
</ul>
<!-- /.navbar-nav -->
</div>
</nav>
It does not work when i add the nav bar.
It's probably something else. look here:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse"><i></i></a>
<div class="navbar-brand text-center"> <img width="114" height="64" src="style/images/logo.png" alt="" data-src="style/images/logo1.png" data-ret="style/images/logo#2x.png" class="retina" /> </div>
<!-- /.navbar-brand -->
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
<li>Elements</li>
<li><i class="icon-heart-1"></i><span>Elsewhere</span></li>
</ul>
<!-- /.navbar-nav -->
</div>
</nav>
<div id="portfolio" style="margin-top: 100vh; background: blue; color: white; height: 100vh;">PORTFOLIO</div>
<div id="about" style="margin-top: 100vh; background: black; color: white; height: 100vh;">ABOUT</div>
<div id="contact" style="margin-top: 100vh; background: green; color: white; height: 100vh;">CONTACT</div>
<div id="elsewhere" style="margin-top: 100vh; background: red; color: white; height: 100vh;">ESLEWHERE</div>
I want to make a translucent mask appear over the content when I open the navbar.
Here is my code:
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse"">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
About
<ul class="dropdown-menu">
<li>What</li>
<li>How</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class= "content">
<div class = "container">
<div class = "row">
<div class="col-sm-10">
Enter Text Here
</div>
</div>
</div>
Is there a way to do this using just css?
Something like sibling selector if class is added to active nav item?
nav.active + .content {
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(0,0,0,0.6);
left: 0;
top: 0;
z-index: 999;
}
I'm building a site in BootStrap and my scroll disapepeared completely. I now can't scroll up and down. Why is that? I already tried overflow, overflow-y, but I don't understand what I'm doing wrong.
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
</div>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code {
font-size: 80%;
}
.jumbotron {
background-image:url('http://tomodom.com/wp-content/uploads/2013/07/Persona4Golden_Hero.jpg');
height:400px
}
The Div with the fixed position called "" doesn't close until after the page content, which is located just before the div with the id of Footer. Instead it should finish at the end of the nav section.
Copy this.
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sugoi!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Anime">Anime</li>
<li class="Manga">Manga</li>
<li class="Jogos">Jogos</li>
<li class="Opiniao">Opinião</li>
<li class="Outros">
Outros <b class="caret"></b>
<ul class="dropdown-menu">
<li>AMV</li>
<li>Cosplay</li>
<li>Passatempos</li>
</ul>
</li></ul>
<ul class="pull-right nav navbar-nav">
<li>Sobre</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sugoi!</h1>
<div class="jumbotron">
<div class="container">
<a href="http://google.com"><h1>Persona 4 - The Animation</h1>
<p>Sabe mais!</p></a>
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
I want to create navigation bar [vertical] with bootstrap 3.
I tried this but it didn't work.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
nav-pills class needs two l:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
It looks like you are missing an l in nav-pills (you have it listed as nav-pils)
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
you could use the pills or you just could write this:
your html:
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i><span> Link1 </span></li>
<li><i class="fa fa-info-circle"></i><span> Link2 </span></li>
<li><i class="fa fa-heart"></i><span> Link3 </span></li>
<li><i class="fa fa-briefcase"></i><span> Link4 </span></li>
<li><i class="fa fa-envelope"></i><span> Link5 </span></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
your css:
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
working example here: bootply
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
Use navbar-pills. It will work.
I am trying to insert an image above a navbar, but I it is not working for me. Here is my html:
<div class="wrapper" />
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
and my css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Anytime I add a div or any content, it is pushed to the top of the page. I can add padding, but when I start to resize the screen it breaks and leaves a gap in the image and the navbar. Any help would be great.
<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.
Ref
Demo
<div class="wrapper"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
The issue is /> at the end of .wrapper, because it is not allowed (depending on your doctype). Remove it and give it </div> like the other divs, I think it's going to work.