Archived topic
Vertical header - 100% height
3 replies · Started by Janek on October 7, 2017
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.
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
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?
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
