Full height menu

[Kobber]

Hi,
I’ve made a left vertical menu, and I really would like that the off canvas is full height. Like when you use the collapsed menu in a top menu. I’ve tried the collapsed menu in my vertical menu, but if it should work I had to live with the off canvas on the right side. If I set it to left, it “unboxes” the menu?!

Is this possible? I’ve tried to change the height off the off canvas, but that didn’t go well.

My website is: https://vektropol.dk

And here’s some inspiration for what I’m trying to accomplish:

[rad]

Hi @Kobber,

Thanks for reaching out.

What do you mean by Unboxes? Would you mind providing a screenshot?

As for the height, it would require custom CSS due to limiting structure, please add this CSS to your header bar’s custom CSS

.x-bar-v .x-bar-container, .x-bar-v .x-mod-container {
position: relative;
}

Then add this to your off canvas Element CSS for full-height

$el .x-dropdown {
    top: 0;
    bottom: 0;
    height: 100vh;
    position: absolute;
}

Please note that we don’t provide support or maintenance to any provided CSS, any change should be users responsibility

Cheers!

[Kobber]

Hi again,

Hmm… it seems a bit odd. When I tried the “Navigation Collapsed” yesterday in my vertical navigation menu, I’m pretty sure that it could go off canvas. Today there’s no such option and it displays the menu instead of creating a menu icon!? It works fine with “Navigation Collapsed” in the mobile menu…

[Kobber]

Hello… is anybody there?

[ruenel]

Hello @Kobber,

Thanks for updating in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

Meanwhile, to make your idea easier, please go to the Pro > Global Blocks first. Create a global block and insert the navigation collapsed element. You can add icons and other elements as well. Once you are done with the block, please take note of the global block shortcode.

Go back to Pro > Header and edit your custom header. Insert a content area off canvas element and use the global shortcode to display the navigation collapse element. This method will display the content area off canvas element in full height while displaying the navigation collapsed element inside it.

To know more about global blocks, please check this out:

• https://theme.co/docs/global-blocks

To know more about the difference between the content area off-canvas and the navigation collapsed element, check this:

• https://theme.co/docs/content-area-off-canvas
• https://theme.co/docs/navigation-collapsed

[Kobber]

Hi @ruenel,

That’s a great piece of advice and tips you just posted! I’ve now created the menu I always wanted. Thanks!

[matt]

Glad to hear that, @Kobber!