Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Vertical header – 100% height

Home Forums Support Vertical header – 100% height

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #399033
    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.

    GP Premium 1.4.3
    #399120
    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

    #399125
    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?

    #399134
    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.