Menu icon Foundation
Image size and vh

This is the example I am working as an exercise and as intro to my next project
http://zlajo.webfactional.com/
I am currently having 2 problems which I am not able to work out on my self

1) I am trying to get this image (which is planned to be replaced with slick slider) to occupy the rest of the page both on mobile and desktop. I was successful with @Rafi example when image is set as a background
http://codepen.io/rafibomb/pen/raZqrz
but when I use 100vh on image container the whole layout of the page is distorted

2) dropdown menu is not working as it should on mobile. It works when I add vertical to ul element but then dropdown becomes sort of drop-to-right. Do I need to use media query here or am I doing something completely wrong?

vhimageSizefull height

This is the example I am working as an exercise and as intro to my next project
http://zlajo.webfactional.com/
I am currently having 2 problems which I am not able to work out on my self

1) I am trying to get this image (which is planned to be replaced with slick slider) to occupy the rest of the page both on mobile and desktop. I was successful with @Rafi example when image is set as a background
http://codepen.io/rafibomb/pen/raZqrz
but when I use 100vh on image container the whole layout of the page is distorted

2) dropdown menu is not working as it should on mobile. It works when I add vertical to ul element but then dropdown becomes sort of drop-to-right. Do I need to use media query here or am I doing something completely wrong?

Rafi Benkual over 3 years ago

I see the image is inline in the HTML. A background image would work better.

So one way I might do it is make the menu a certain height like 10vh and the image 90vh so that the menu and image take up all the height.

Example:
http://codepen.io/rafibomb/pen/dGqWpQ

For the mobile menu, you defined a medium and larger behavior but you need to set the mobile behavior. Adding the `.vertical' class will do this:

<ul class="vertical medium-horizontal menu dropdown expanded" data-dropdown-menu="fo3sol-dropdown-menu" role="menubar">

Vladimir over 3 years ago

Rafi, the solution using 10vh and 90vh is working but not on all devices. Sometimes it breaks on medium size, sometimes on small, sometimes on both, so this is not the way to solve this problem. I might reorganize the whole page or come up with another solution.