Zurb Foundation 6 sticky menu in off-canvas sidebar - html

Hi I am trying to get zurb foundation 6 to have the off-canvas menu with sticky menu inside.
Remaked off-canvas layout to have same height of sidebars and content blocks in desktop view.
Problem:
Sticky menu not working in right off-canvas sidebar
<div class="off-canvas position-right reveal-for-medium sticky-container" id="offCanvasRight" data-off-canvas="" data-position="right" data-sticky-container="" aria-hidden="true" data-offcanvas="f9d5j6-offcanvas" style="height: 24px;">
<div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas data-position="right" data-sticky-container>
<div class="callout sticky" data-sticky data-margin-top="0">
<h5>This is a callout.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
It's dangerous to go alone, take this.
</div>
</div>
</div>
I've created a JSFiddle here that demonstrates the problem.

Related

Semantic UI: Make vertical menu (sidebar) collapse in tablet and mobile view

I'm building an HTML + CSS design based on Semantic UI and I was able to make pretty much any element responsive by using the class stackable.
However the left vertical menu, which I use as a visible sidebar, won't collapse in tablet and mobile view.
The result I need is exactly like the Semantic UI Docs page: the sidebar visible in desktop and landscape tablet and hidden, but toggleable, in portrait tablet and mobile.
Here's my code:
<div class="ui left vertical menu collapsible main sidebar visible desktop only">
<div class="transparent-bg">
<div class="ui center aligned basic sideheader segment">
<h2 class="ui header">Dashboard</h2>
</div>
<a class="bold item">
<i class="building outline icon"></i>Add Item
</a>
<a class="active item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
</div>
Any idea on how I can achieve this? There's no documentation on the official docs page.
Many thanks!
I don't work with semantic-ui but have you checked https://semantic-ui.com/modules/sidebar.html ?

Disable Foundation Sticky on medium devices (tablets)

I have made a sticky sidebar with the help of foundation. Here is my code
<div class='row' id='top'>
<div class='left'>{some nested divs}</div>
<div class='right' data-sticky-container>
<div class='sticky'
data-sticky
data-anchor='top'>
</div>
</div>
</div>
My sticky is located in the right class and he is its container while the anchor is row class.
It works fine on PC and it is automatically disabled on mobile which is great.
Here is my problem - if I open it on Ipad or any other tablet the sticky leaves right and is on top of left.
I would prefer it if it could just be disabled.
Destroy by screen size
if (!Foundation.MediaQuery.atLeast('medium')) {
$('.sticky').foundation('_destroy');
}
What solved it for me was data-sticky-on = 'large' which disabled sticky on smaller devices

Skeleton: A simple, floating, responsive navigation bar

I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!

fixed responsive container in bootstrap with horizontal menu items

<div class="container">
<div class="leftclass" style="float:left">
<div class="topbar">
menu1 menu2 menu3 menu4
</div>
<div class="bottombar">
menu5 menu6 menu7 menu8
</div>
</div>
<div class="rightclass" style="float:right">
<table class="table responsive">
<tr><td>info1</td><td>link1</td></tr>
<tr><td>info2</td><td>button2</td></tr>
</table>
</div>
</div>
I want to have responsive container with left side - two bars(one below other) containing menu-items and right side - table with some info and button-links.
Moreover I want this container to be fixed positioning and responsive for zooming in bootstrap
You could be better off building the foundations of your site with the Bootstrap Grid System. It's very flexible and will most likely get you most of the way there.
Check out the examples.

centred logo with hamburger stack icon in bootstrap 2.x

Im coding a navigation like the below mockup using bootstrap 2.x, the idea is to have a centered logo along with a 'hamburger stack navigation toggle'
Ive got the logo centered fine, but im a little unsure how to get it to work with the stack icon whilst keeping to logo centered, because if i add in another element (the hamburger stack) which will need its own span then the logo can only have span11 which isn't enough to center it on the page.
I guess i could achieve this with absolute positioning of the hamburger stack, but would this be correct in terms of using the bootstrap framework and keeping the responsive nature of it working correctly.
Ive made a jsfiddle of the issue here - http://jsfiddle.net/xKSUH/937/
The html im using is
<div class="row-fluid">
<div class="span12 logo-centre">
LOGO
</div>
<div class="span8">
= <!--hamburger stack placeholder icon-->
</div>
You can use an offset to create an empty column on the left side to keep the logo centered.
<div class="row-fluid">
<div class="span10 offset1 logo-centre">
LOGO
</div>
<div class="span1">
= <!--hamburger stack placeholder icon-->
</div>
</div>
Updated fiddle - http://jsfiddle.net/xKSUH/939/