I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is:
<!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>
<div class="off-canvas-wrap" data-offcanvas>
<div class="contain-to-grid sticky">
<nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
</nav>
</div>
<div class="inner-wrap">
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</aside>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<!-- Content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.
CSS:
.mycontent {
height:95vh;
overflow-y:scroll;
/* fix scrolling on webkit touch devices (iPhone etc) */
-webkit-overflow-scrolling: touch;
}
HTML:
<div class="row mycontent" >
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
Try this in css (Works 100%)
.tab-bar {
position: fixed;
width: 100%;
z-index: 702;
}
I had the same issue, couldn't get it to stick when open. In the end I went with this:
CSS:
.tab-bar {
position: fixed;
z-index: 9999;
width: 100%;
}
Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s.
.inner-canvas-menu-wrapper
{
position: fixed;
top: 0;
overflow-y: hidden;
width: inherit;
padding-top: 2.8125rem; (standard height of the "tab-bar")
}
JS
Changed foundation.offcanvas.js -> settings -> open_method to "overlap"
Now it overlaps, but it at least it is fixed/sticky. You may want to change close_on_click to "true" as well in this setup.
If you are using Foundation 6 it will be fixed by default:
https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference
Related
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I just started with bootstrap 3 and got stuck on an issue. I wanted to have a side menu like in this documentation which is positioned fixed during scroll down and highlights sections accordingly. I have managed to get something done very similar to this but when I resize the window to mobile size, the side menu overlaps the content instead of being on top of it. If you checked the link, when you resize the window, the sidemenu goes on top of the content.
I believe the culprit here is affix-top but I leave it to the experienced people here in stackoverflow
<body data-spy="scroll" data-target="#myScrollspy">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Title
<small>Subheading</small>
</h1>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Sidebar Menu -->
<div class="col-md-2" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<!-- Content Column -->
<div class="col-md-9">
<h2 id="section-1">Section One</h2>
<h2 id="section-2">Section Two</h2>
<h2 id="section-3">Section Three</h2>
<h2 id="section-4">Section Four</h2>
<h2 id="section-5">Section Five</h2>
</div>
</div>
</div>
</body>
How can this be fixed?
What you are looking for is called a CSS media query, which allows you to modify a style rule based on media features such as color, height, and width. The Bootstrap page you linked to uses min- and max-width features to change how the sidebar appears, which you can see in its CSS filenear the bottom of the page. The pertinent code looks like this:
#media (min-width: 768px) {
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
.bs-docs-sidenav.affix {
top: 0;
}
}
#media (max-width: 767px) {
/* Sidenav */
.bs-docs-sidenav {
width: auto;
margin-bottom: 20px;
}
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
}
I have simplified it a little bit, but that should be enough to get you started. When the max-width is less than 768px the sidebar width will change to auto, and the affix code will keep the sidebar at the top of the page.
Below is the link to my current implementation of Navbar using bootstrap 3.1.1.
I have used container class to all Nav also. is it the correct implementation ? if I don't use container class to nav, it exceeds the width of Container. So I had to use it. Can someone please confirm whether its the right implementation?
When I click on any button, the MainContent Child div's Slide up or Slide Down, once it crosses the Nav bar. I want it to be hidden (Scrolling div which you see above the Nav Bar), but its not hiding. I've tried to add one more div above Nav, but even that exceeeds the width of container though its inside container. So I've tried to use container class for that also, it worked fine but when I resize my browser to small size that div disappears and again I am able to see mainContent child item moving able the Nav bar.
HTML
<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
<head>
</head>
<body>
<div class="container">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="container inside-bar">
<ul class="nav navbar-right">
<li class="active">About</li>
<li>Services</li>
<li>Our Staff</li>
<li>book</li>
<li>Gift Cards</li>
<li>Reviews</li>
</ul>
</div>
</nav>
</div>
<div id="mainContent">
<div id='Services' class="box">
Services
</div>
<div id='about' class="box">
About
</div>
<div id='OurStaff' class="box">
Our Staff
</div>
<div id='book' class="box">
book
</div>
<div id='Gift' class="box">
Gift
</div>
<div id='Reviews' class="box">
Reviews
</div>
</div>
</div>
</body>
</html>
Currently in the link you will not see the Div which I added before Nav.
http://codepen.io/anon/pen/DmiGs
you can add container . Implementation is ok
.navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}
I'm learning Zurb Foundation, so this is my first web site attempt. I have a problem with the Stick Top Bar. It "kind of" works, but it does some strange things when collapsed (all my items collapse into the button menu == small screen/window).
The problem is that if I go to the bottom of the page and I click on the "Menu" button on the top bar (on a small screen/window), the page goes to the top. My english is not the best, so I'll live this preview of the webpage so you can check it out:
http://okgo.comuv.com/
Steps to reproduce:
1) Resize your browser window until the topbar becomes collapsed (mobile version of the topbar).
2) Scroll down to the bottom.
3) Click "menu".
I've tried removing almost everything on the page, but the problem still persists.
Here's the code so you can take a look at it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Beyond The Sky</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<style type="text/css">
body, html {
height: 100%;
width: 100%
}
#homepage {
background-color: black;
background-attachment: scroll;
background-image: url(img/nasabackground.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
#content {
background-color: black;
background-attachment: fixed;
background-image: url(img/stars.jpg);
background-position: center center;
background-repeat: repeat;
}
#homepagecontentwrapper {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#maintitlewrapper {
display: table-cell;
vertical-align: middle;
}
#maintitle {
color: black;
font-family: Verdana, sans-serif;
}
.centertext {
text-align: center;
}
</style>
</head>
<body>
<div id="homepage">
<div id="homepagecontentwrapper">
<div id="maintitlewrapper">
<div class="row">
<div class="small-12 columns">
<h1 id="maintitle">Hello There!<br/>This is a great site. Don't you think?</h1>
</div>
</div>
<div class="row">
<div class="large-2 small-6 columns centertext">
Contacto
</div>
<div class="large-2 small-6 columns centertext">
Nosotros
</div>
<div class="large-8 hide-for-small columns">
</div>
</div>
</div>
</div>
</div>
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Beyond The Sky</h1></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div>
<!--Content Placeholder-->
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!--End of Content Placeholder-->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I'm new to CSS and am designing my first site from scratch using CSS (I've recently graduated from the for the love of God stop using html to style your websites way of life).
I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I've started the code but I'm stuck. The header will have a logo and the navigation (I haven't coded the navigation yet but that's not too hard) and the footer will simply have one line of content.
I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that's way more than what I want.
Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.
HTML
<body>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</div>
</body>
CSS
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
#header {
background: #636769;
}
#navigation {
}
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 16pt;
background: url(../images/texture.png);
}
#wrapper {
width: 938px;
margin: 0 auto;
padding: 20px 20px;
background: white;
}
#footer {
background: #636769;
}
If you want #header and #footer to span the entire page, you will also have to move them out of #wrapper. You may want to specify height too, e.g. height: 40px.
Do you want the header and footer to stay in place while scrolling? If so, use position: fixed; on both. Then, on #header put top: 0px; left: 0px; right: 0px;; and on #footer put bottom: 0px; left: 0px; right: 0px;.
Anything else that you want to do, let me know. I'd be glad to help.
Since your #wrapper class encompasses the entire page then all subsequent tags will inherit the same value. If you want the #header or #footer to ignore this, then you will need to specify a different value for those classes. Try and change these classes to specify their own width values (i.e. width: 938px;) and see what happens.
Pull the header and footer divs outside the wrapper to allow them to fit the width of the page.
<body>
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</body>