Site logo

Archived topic

Menu Text Orientation

18 replies · Started by troyw on August 8, 2021

Viewing posts 1–15 of 19

Hi guys,

I am looking to change the orientation of the Menu text, so that instead of each word sitting horizontal (180 degrees), the words sit at 40 degrees. I have included a screen shot to give you an idea of what I am after.
Is there a code snippet or feature in GP that allows me to do this?

Thanks

That is absolutely perfect Leo. Brilliant!
Thanks so much.
Sorry, is there a way to make it do this in the Mobile Menu too?

It would just be the code without media query:

.main-navigation .main-nav ul li a {
    transform: rotate(-40deg);
}

Once again Leo, that is perfect! Thanks again.

No problem :)

Hey guys,
Sorry to be a pain. I have added the Mega Menu to one of the Menus and find that having the Mega Menu present sideways is probably pushing things a bit too far.
Is there a way to exclude the Mega Menu from the slanted orientation?

Thanks

hi there,

Can you provide the link to the site again? It got wiped when the topic was marked resolved.

Let us know. :D

Hi,
See link attached. You'll see I have added some links to the Mega Menu but it is not way too big and at a slant. Thanks

Hi there,

try this instead:

.main-navigation .main-nav > ul > li > a {
    transform: rotate(-52deg);
}

Hey guys,
The code David provided has worked nicely for desktop, but in Mobile responsive view the link indicator is not in the right place?
Thanks

Let's modify David's code a bit.

Can you try this?

.main-navigation .main-nav > ul > li {
    transform: rotate(-52deg);
}

.main-navigation .main-nav > ul > li > a {
    width: fit-content;
}

Hey Elvin,
No, that has done something really weird to desktop. Have a look.
Mobile view is better, though i may struggle as menu gets bigger.

To clarify, is the issue solely on the off-canvas menu? (mobile)

Hey Elvin,
I'm looking at both the Main Menu and the Mobile menu as presented on the page link attached.
OK, so this code looks good on the home page and mobile but for a couple of issues;

.main-navigation .main-nav ul li a {
    transform: rotate(-52deg);
}

The Sublinks are not displaying in the Grey area and instead displaying below it, which isn't right. One of the sub menus is hidden for some reason and i am unable to click them?

The other menu is when we are in Mobile view. Again, this looks fine, except for the submenu arrow next to the 'Music' menu is broken?

Cheers

This archived topic is closed to new replies.