Menu on the left/right side!

[JanneKern]

Hey guys,

im searching for an option to show the menu like this:
-https://www.ramonhaindl.com

As far as I know he is using lay theme too. So if you guys have a good hint, let me know!

Thank you very much <3
Cheers Janne

[Richard]

Dear Janne

@JanneKern

You are correct that www.ramonhaindl.com is using Lay Theme.

To help better understand what is happening.

Firstly Lay Theme's Primary and Secondary menu's are used ( 2 menu style ) 1 on the left & 1 on the right.

Then the following Custom CSS had been applied ( this case for the left menu: )

    position: fixed;
    left: 1em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
270deg
);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(
270deg
);

The main thing being a 270 degree rotation.

---

& for the right menu:

position: fixed;
    right: -5em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
90deg
);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(
90deg
);

Mainly a 90 degree rotation.

---

Here in the below image are the results if i remove the 270 degree adjustment off the left menu:

---

Custom Code can be added to Lay Theme via:

Lay options > Custom CSS & HTML >

Also refer to the documentation page for help if needed:

https://laytheme.com/documentation.html#custom-css-styling

---

Best wishes Janne and good luck! 🌝

Richard

[JanneKern]

@Richard hey Richard, thanks for the quick response. I pasted it but didn't worked. I switched from "(" to "{" made no difference. Did I pasted it in the wrong column for css code?
Or do I need to take the window for the Top/Head CSS Code?

can you tell me what is wrong?. Sorry for bothering with that (hopefully) easy stupidity of mine.

I think the CSS need like a navigation where he applies the code?

Cheers Janne

[kalamakumaran]

Right:

.primary {
 position: fixed;
    left: 1em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
270deg
);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(
270deg
);
}

Left:

.second-menu {
position: fixed;
    right: -5em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
90deg
);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(
90deg
);

}

Not show if left and right are correct this way. I’m on my phone and can’t check. Otherwise just put it the other way round. :)

[Richard]

Thanks @kalamakumaran !! 💥🌝

[JanneKern]

@kalamakumaran said in Menu on the left/right side!:

.primary {
position: fixed;
left: 1em;
top: 50%;
text-align: center;
-webkit-transform: rotate(
270deg
);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(
270deg
);
}

big thanks to both of you, it worked!

[JanneKern]

just in case somebody needs the same code, this code worked for my layout:

.primary {
 position: fixed;
    left: 1em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
270deg
);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(
270deg
);
}

.laynav.second_menu {
position: fixed;
    right: -5em;
    top: 50%;
    text-align: center;
    -webkit-transform: rotate(
90deg
);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(
90deg
);
}

here's the link for the site.
www.jannekern.de

thanks to all the kind help guys!

[Richard]

Dear @JanneKern

Thank you for posting! thats great for others in the future!! 💥

---

Best wishes

Richard