I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
Related
This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem where the bar no longer fills the screen's width. The dropdown is only 4 characters, how could it be too large? What am I missing here?
<div class="row">
<div class="fixed small-12 medium-12 large-12 column">
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
large:
small:
It still needs some tweaking, but I fixed it. I added
style="display: none;"
to
<ul class="title-area">
It looks like they were both trying to occupy the same space.
I've read it needs to be inside a 12-width column...
I really don't think that this is right; that is the reason for the problem you introduced.
Actually I would change
<div class="fixed small-12 medium-12 large-12 column">
to
<div class="fixed">
If want it to show for small screens only then you could do like this
<div class="fixed show-for-small-only">
Also don't forget to reinitialize or reapply listeners as per documentation (at the very bottom of the page).
$(document).foundation();
and
$(document).foundation('topbar', 'reflow');
Also note the list items should contain links. Change
<li>Test</li>
<li>Test</li>
<li>Test</li>
to
<li>Test</li>
<li>Test</li>
<li>Test</li>
It's not exactly the same, but maybe helpful. I use top-bar for medium and larger screens, and I use tab-bar for small screens.
You can find inspiration on my website. Feel free to inspect it. It's also on GitHub.
It is based on the Zurb-Foundation 5 documentation. Shouldn't be too difficult to cope with I hope.
Also noticed you are missing the mobile menu icon.
Should be an li in the title-area
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).
My Code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<ul class="off-canvas-list">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</ul>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
.zurb-links li{
display:inline;
}
.sideBar{
height:100%;
position:fixed !important; /* added !important just for the snippet to work. not needed for live production..
}
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row ">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation"> <a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).</p>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Fiddle.
If you want to fix your side bar in your web page you have to go with position:fixed.
The problem that one faces by doing this is that rest of the columns are relatively positioned -they go under the side-bar or on top of it(including the footer if you span to 100% width).
In the fiddle i gave a span of small-4 and medium-2 columns for side-bar , small-8 and medium-10 small-push-4 medium-2-push columns for content and nested footer in to this.
As the side-bar has position:fixed the content column(position:relative) stacks underneath it so i push the columns based on the span of side-bar.
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
....
..
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>Your content</p>
.....
...
<div class="zurb-footer-bottom">
....
..
</div>
</div>
</div>
I had a similar problem. Here is my solution:
HTML-Code:
<body>
<!-- Header content "top-bar" ... -->
<div class="icon-bar vertical side_fixed hide-for-small-only">
<a class="item">
<label>Menuitem 1</label>
</a>
<a class="item">
<label>Menuitem 2</label>
</a>
<a class="item">
<label>Menuitem 3</label>
</a>
</div>
<div class="admin_content">
<!-- Main-Content "row" "column" ... -->
<!-- footer -->
</div>
<!-- scripts -->
</body>
SCSS-Code: (CSS similar)
#media #{$medium-up} {
.side_fixed {
left: 0;
top: $topbar-height;
bottom: 0;
position: fixed;
width: 8rem;
max-width: 8rem;
overflow-x: hidden;
}
.admin_content {
margin-left: 9rem;
}
}
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
Using twitter bootstrap, I am trying to create a sidebar in a master-detail UI with the code below. The problem is that the sidebar is always appearing right above the main content or details section as shown in the image below. Any suggestions on fixing this will be helpful. thanks.
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span9 well">
</div>
</div>
</div>
This is the only custom CSS used:
body{padding: 60px 10px 10px 10px;}
Solved
What caused my problem was that, my <div class="container-fluid"> was not wrapped with an outer row class eg <div class="row-fluid">. Once I did that, everything was fine.
Your missing a closing quote here:
<ul class="nav nav-list span3 well pull-right>
Twitter Bootstrap now provides examples, which contain a Master/Detail template. There's no need for pull-right or the the quote hack. Here's adaam's example with the hack removed, working perfectly: http://jsfiddle.net/2Zy6D/
As well as Kevin's fix:
<ul class="nav nav-list span3 well pull-right">
Based on the unknown that you might have other code effecting the width of the divs causing them to sit on top of each other use a lower span number to compensate like this (span numbers must add up to the Bootstrap maximum of 12 i.e. 9 + 3 in your code above [under normal circumstances would work]):
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span8 well">
</div>
</div>
</div>
Wouldn't usually advise this as it's not strictly correct but as this is just for a backend page it seems it will be O.K. So here's a jsFiddle (bit hacky but oh well): http://jsfiddle.net/7MD6m/
I am experimenting with Twitter Bootstrap using this bootstrap example
I would like to replace the text logo (Project Name) with a PNG graphic and cant seem to get it done using this code:
<div class="container">
<div class="masthead">
<h3 class="muted">Bull</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
Thanks for any help!
Within <div class="masthead"> you have <h3 class="muted"> containing the "Project Name" text.
Get rid of the <h3> and replace it with:
<img src="foo.png" alt="" />
(Of course you may want to put a <figure> or <h1> around your image, but it should be as simple as above)