[Support request] Vertical header – 100% height

[Janek]

Hi,
See our site here.

We currently have a vertical header and we are using this code to make it fixed and 100% height

#left-sidebar {
    width: 20%;
 height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-color: #e5e4e2;
    background-repeat: no-repeat;
    background-position: top center;
    border-style: hidden;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #e5e4e2;
z-index: 1;
  }
  .footer-widgets {
    padding-left: 20%;
  }
  .site-info {
    padding-left: 20%;
  }
}

The problem is though that if Shop menu is open then some of the menus below are (especially on smaller screens) not visible and i cannot figure out how to make this vertical header fixed with 100% height in a way that menus would be visible if they are opened. For example: compare home page with this Shop page

Any advice how to make vertical header 100% height and menus scrollable would be really appreciated.

Thanks,
J.

[Heiko]

Hi!

The problem is you menu-item’s padding. Remove the padding

.main-navigation .main-nav ul ul li a {
    padding: auto 20px;
}

or make it even smaller. Or you remove the padding only for smaller devices with @media. Then set

#left-sidebar {
    width: 20%;
 height: 100%;
}

to

#left-sidebar {
    width: 20%;
 height: 100vh;
}

Simpler solution: Add a overflow: scroll to you #left-sidebar.

Does this help a little bit? 🙂

Regards,
Heiko

[Janek]

Hi Heiko,

Thanks for your reply. overflow: scroll kind of worked but i am afraid that it is going to be a bit confusing for the customers to figure out that that sidebar can be scrolled. I am looking for a solution which is more like this here

Any advice how to achieve this?

[Heiko]

Hi!

The left sidebar in this example only has a few item and no dropdown menu, so it fits better to the screens. The right sidebar also has a scrollbar like you can get with overflow:scroll. I think they achieved the behaviour on the left sidebar with some kind of a script because the properties of the left container change if you scroll the page.

I do not think that a scrollable navigation is confusing but this is only my point of view. 🙂

Regards,
Heiko

[Author]

Posts