I'm using Bootstrap Twitter and designed a fluid layout with fixed navbar and footer. But I still need a fixed left sidebar with 100% height and a content area that scrolls if necessary.
I'd like to use the browser's default vertical scrollbar, I mean, I don't want to use overflow-y in my content div. I saw this on some HTML5 websites and I'd like to do the same.
Can you help me?
Here is the code I'm using: http://jsfiddle.net/julianonunes/AhK3c/2/embedded/result/
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <a class="brand" href="#">
Texto</a>
<ul class="nav pull-right">
<li>Dashboard
</li>
<li class="">Link
</li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid no-padding header-margin">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
<div class="span10">
<div class="panel-middle-top">
<div class="middle-top-left"></div>
<div class="middle-top-center">
<ul class="breadcrumb" style="background-color: transparent;">
<li>Home <span class="divider">/</span>
</li>
<li class="active">Link</li>
</ul>
</div>
<div class="middle-top-right"></div>
</div>
<div class="panel-middle-content"></div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Copyright Site 2013.</p>
</div>
</div>
Thanks.
Your footer is not fixed ... but rather pushed to the bottom of page when the content is shorter ("sticky").
To make it actually fixed you need to make it have something like:
position:fixed;
width:100%;
bottom:0;
and the sidebar you can make to something like this, that it always spans between the fixed header and footer (with the top and bottom, you can here make it span the way you want):
.sidebar-nav {
position:fixed;
top:52px;
bottom:52px;
width:12%;
}
here is an update to your jsfiddle
Note: With position set to fixed, the element gets positioned in a similar way to absolute (so you can set its boundaries/span by defining top, bottom, left and right), but instead of being positioned relative to any one of its parent html elements, a fixed element gets positioned relative to the browser window/viewport. Here is quite a good post on the position property, if you want to read some more.
Like this - jsFiddle 1
.navbar-fixed-top, #footer, .sidebar-nav{
position:fixed;
}
.sidebar-nav{
top:50px;
bottom:40px;
overflow-y:scroll;
}
Or like this - jsFiddle 2
.navbar-fixed-top, #footer{
position:fixed;
}
.sidebar-nav{
position:relative;
margin-bottom:60px;
}
#footer {
height: 60px;
width:100%;
bottom:0px;
}
These will likely need a little fine tuning, you seem to be using a lot of external resources that are effecting your layout. You may want to consider simplifying a bit.
Related
Using foundations menu (http://foundation.zurb.com/sites/docs/menu.html) I'm having the problem that adding links to the li tags means the menu is no longer horizontal but vertical. Can anyone point me in the right direction please.
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
li {
display: inline;
}
or
.specific-li-class{
display: inline;
}
For completeness and as mentioned by Jan P, the code with the a tags in the right position
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
Your code is wrong, it is not allowed to have a as direct children of ul. Your code MUST be like this:
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
I'm using the Foundation 5-Framework. I want to create a navigation with a panel under it. When im adding the panel, the navigationbar is always on top the panel.
This is my Code:
<div id="content">
<div class="row">
<div class="contain-to grid fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>MySite</h1>
</li>
<li class="toggle-topbar menu-icon">
<span></span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">
Index
</li>
<li>
Contact
</li>
<li>
About me
</li>
<li class="has-dropdown">
Sign up
<ul class="dropdown">
<li>
Log in
</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="small-12 columns panel">
<p>This is a panel.</p>
</div>
</div>
</div>
</div>
You can either remove the class "fixed" from your third row (if you don't need a fixed positioned top bar),
or add margin-top to the second (panel) row (with the same height as the top-bar) if you wish to keep the top-bar fixed.
When an element is position fixed (like absolute and float) it is not actually on the page in the sense that static elements are not relative to it. so your panel was anchoring to the top of the page, because there was no block above it.
I am simplifying it a bit, but I hope that helps.
I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.
<nav class="top-bar" style="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">Orders
<ul class="dropdown"><li class="title back js-generated"><h5>« Back</h5></li>
<li class="">Create New</li>
</ul>
</li>
</ul>
</section>
</nav>
Just remove the height in your CSS:
.top-bar .name {
height: 45px;
}
Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.
I am designing a website using twitter bootstrap. Everything is working fine except the header area.
Screenshot
I have used .container-fluid to set the full-width background. And used .container to put the contents within 960px. But the problem is with the logo background. I want logo background area to fill out the left area outside the .container class. Is it possible?
Here is my markup -
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="span4 logo-area">
<div class="logo">
<h1> hello.</h1>
</div>
</div>
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
It is, but you will need to remove it from the flow of the container either by placing it outside of it, or using CSS to control it by giving it position:absolute etc.
Something like:
<div class="logo">
<h1> hello.</h1>
</div>
<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you don't want to use position:absolute property.However you can't make your logo background area to fill out the left area outside the .container class.Because whatever you do it will remain inside .container class. The only way is to either you make the position:absolute or move the your .logo class outside of .container class(just above the the .container class).
I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns
I tried the following (but it doesn't work)
<div class="row">
<div class="large-12 columns">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
Update:
I created jsFiddle based on Foundation Example
If the browser size is big, the navigation width changes. But I want it to be centered fixed as main content.
As the Foundation 4 docs saying :
http://foundation.zurb.com/docs/components/top-bar.html
If you want your navigation to be set to your grid width, wrap it in
div class="contain-to-grid".
So try using the following :
<div class="contain-to-grid">
<!-- Your nav bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title area here... -->
</ul>
<section class="top-bar-section">
<ul class="left">
<!-- Title area here... -->
</ul>
<ul class="right">
<!-- Title area here... -->
</ul>
</section>
</nav>
</div>
Hope this helps !
If I understand correctly what you want, you just need to wrap your nav.top-bar element in a div with class contain-to-grid.
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.
You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html
Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?
EDIT
If i understand it rights, it pretty simple to do with CSS :
.top-bar {
max-width: 900px;
margin:auto;
}
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<div class="row">
<div class="large-12 columns">
<ul class="menu" data-responsive-menu="accordion">
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</nav>