So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page?
<div class="container">
<div class="row">
<div class="four columns relativePosition">
<div class="fixedPosition">
<div class="four columns">
Menu Here
</div>
</div>
</div>
<div class="eight columns">
Other Content
</div>
</div>
</div>
I was able to get the fixed position to work using this structure but in some cases the contents of the menu grows too big and overlap the contents of the eight column. I dont know if there is a better way to doing this?
Since position fixed will mess up any grid layout I tried to use a hacking putting two divs around each container where the second div would have a position fixed but it is still having some weird effects.
Of course CSS grid and flexbox can work together in a layout. You can use flexbox inside CSS grid and vice versa. For instance, you could use flexbox to center an element like a button both vertically and horizontally within a particular grid cell (since centering with other CSS methods is … tricky).
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
Found this article - ZURB + ScrollSpy. Got it working in 5 mins. What I found that wrapping the sidebar content in scrollspy div underneath the grid position.
Using javascript to solve a problem like this seems like overkill. I would try to keep to the basics by using Foundation's offset classes like this:
<div class="row twelve columns">
<div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;">
Menu
<ul><li>Menu Item</li></ul>
</div>
<div class="ten columns offset-by-two">
Content goes here
</div>
</div>
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With