Menu icon Foundation
What's the recommended way to setup a fixed width sidebar with flexible content in Foundation 5?

In CSS is incredibly easy, just wondering if there is a recommended way (or any way at all) to do it in Foundation 5.

See screenshot for details.

Any suggestion is appreciated, thank you :)

M.

Fixed width sidebar

off-canvasfixed widthmenu

In CSS is incredibly easy, just wondering if there is a recommended way (or any way at all) to do it in Foundation 5.

See screenshot for details.

Any suggestion is appreciated, thank you :)

M.

Fixed width sidebar
Steve Adams about 6 years ago

Do you just want to hide the sidebar on the small size?

http://foundation.zurb.com/docs/components/visibility.html

Or do you want a menu of the sidebar that is hidden on the small size but appears when the hamburger icon is pressed?

http://foundation.zurb.com/docs/components/offcanvas.html

Jeremy Englert about 6 years ago

You can also use the combination of the two items listed by Steve to achieve what you're looking for.

  1. Set the sidebar to hide on small devices using visibility classes.
  2. Create an off-canvas nav containing the content from the sidebar.
  3. Set the off-canvas nav to hide on everything except for small devices.

So essentially, your sidebar will be hidden on small devices and replaced by a hamburger style icon.

Miko about 6 years ago

Hi Steve and Jeremy,

Cheers for the suggestions.

The visibility classes are definitely a go.

However doesn't the off-canvas sidebar push the content out of the view port?

I'm trying to replicate a similar behaviour to the sidebar on this site

http://demo.themezilla.com/mesh

Thanks,

M.

Jeremy Englert about 6 years ago

If you're trying to replicate that, then there will be no need for the off-canvas nav. You can achieve what you're looking for using visibility classes.

I'd be interested in seeing what you come up with. You don't need many full-width foundation sites (most are contained within rows).

Miko about 6 years ago

Hey Jeremy,

The problem is that I can't find a way to keep the sidebar width fixed with the default Foundation grid.

I might have to simply use my own css for the sidebar and use Foundation grid within the content area.

Unless there is a better 'Foundation way' to do it....

<div class="container">

    <div class="sidebar">
    <!-- Fixed width sidebar -->
    </div>

    <div class="row">
        <div class="small-12 columns">
        <!-- Foundation Grid -->
        </div>
    </div>

</div>

.container {
  background: #ffffff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  overflow-x: hidden;
  padding-left: 280px;
  width: 100%;
}

.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  background: #ffffff;
}

@media only screen and (max-width: 640px) {

  body { -webkit-text-size-adjust: none; }
        .container { padding-left: 0; }
  .sidebar {
    background: #ffffff;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 45px;
    position: relative;
    width: 100%;
  }
}

Jeremy Englert about 6 years ago

Foundation classes are all setup to be fluid - so you're going to need to write your own class for a fixed sidebar. That's one of the best parts about Foundation - you don't NEED to use their classes/features, they are simply their when/if you need them.

Vishal Iyer almost 6 years ago

@Miko, did you find a Foundation solution to this?

Christian Matthias almost 6 years ago

Call me crazy but but wouldn't you just change the grid to be 100% instead of a fixed width like 1000?

Moreover, if you wanted a fixed sidebar which is essentially like a nav menu section to the side that would simply be a fixed position html element. you could still use the grid system and vis classes from foundation with that.

Am I missing something?

Otherwise a normal side bar is like what is on this page right? with a grid class of 9 , 3... going to small of 6 and 6 i believe.

Designer almost 6 years ago

I need to solve the same problem and have found none. This seems to be a blisteringly obvious issue for this type of layout element...that Foundation (apparently) doesn't accommodate?

Or am I missing something?

Brandon Arnold almost 6 years ago

Somethings are just easier to do outside of the grid system. It would be a pretty difficult thing to do with the framework and add some bloat for such a minor effect.

This should get you most of the way there, but feel free to add some media queries so it works on mobile.
http://codepen.io/zurbrandon/full/KAGdr

Foundation is meant to be the Foundation, but some coding is still required to make more unique layouts.

Florian over 5 years ago

So is there any example for something like this ?
Those pictures posted in the first post are exacly the layout i want but i dont know how to start.
Is there anyone who can post a example for something like this ?

Digital Silex over 5 years ago

Hi there,

Any solution ? I'm trying to do a similar website, an Indexhibit-like, with a hide sidebar for the mobile devices.

Miko have you find something ?

Ben