Add Vertical Nav Modal

Support
#1

Hi
I am trying to add a side vertical nav modal on one page. I tried setting it up as a left side in pro header. But, cant figure out how to make text vertical (sideways) and also the left panel is now messing with the top panel. See here:

Thanks

#2

Hi There,

See this guide for vertical text: https://davidwalsh.name/css-vertical-text
Sample implementation is like this: https://screencast-o-matic.com/watch/cbXbfp2rU5

That is Fixed Left and by default it will occupy the left part regardless of other content. Other headers will adjust but content below it be covered if you’re using fullwidth templates.

Hope this helps.

#3
Summary

Here is mockup of what I want to accomplish.

#4

Hi there,

You will need extra custom CSS for that setup due to structures. Please add this CSS to your header custom CSS.

.hm25.x-text {
white-space: nowrap;
}
.hm24.x-anchor-toggle {
    z-index: 99999;
    position: absolute;
    height: 176px;
    opacity: 0;
}

Please note that this CSS only works for your current setup and header, hence, this may not work in the future or of copied to somewhere else. And we can’t provide support for any custom code, but you’re free to enhance it or hire someone you may able to modify it.

Thanks!

#5

Thanks! Now how can I stop the left side from pushing over the other headers? I want it to only be in between the top and bottom.

#6

Hi there,

Ah, please add this as well

.hm22.x-bar-space {
display: none;
}

Cheers!

#7

Perfect, thanks!

#8

You are most welcome!

#9

Hi again, I changed the top header bar slightly and the vertical nav went crazy again.
Here is the one that works and looks proper, no space at top of header bar and no toggle showing:
http://concordportal.staging.wpengine.com/songwriters/gene-vincent/

Here is the new one, with the top space and toggle showing:

I want it to look like the first one but with the new inline nav in the top header.

Thanks for your help!

#10

Hi there,

Unfortunately, it will be impossible to have the Inline navigation and the customized menu you have added. As my colleague mentioned before this is exactly the side effect he was talking about. The suggested customization breaks the header at some point due to additional changes. Unfortunately, we can not continue to give support for this kind of customization, and this will pile up in future, so even if this one is fixed with extensive customization which is surely outside of our support scope it may break in the future update or further changes to the header options.

You will need to maintain the code yourself or hire a developer to do it for you.

Thank you for your understanding.

#11

Okay, I was able to figure it out, here is what worked:

.transform {
transform: rotate(-90deg);
transform-origin: left middle 0;
float: left;
}
.hm26.x-text {
white-space: nowrap;
}
.hm25.x-anchor-toggle {
z-index: 99999;
position: absolute;
height: 176px;
opacity: 0;
}
.hm22.x-bar-space {
display: none;
}
.hm23.x-bar-space {
display: none;
}

Cheers!

#12

Glad to know that. Have a great day! :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.