Change Size Of Font Off-Canvas Menue / Submenue - Question | JoomShaper
Back to the questions

Change Size Of Font Off-Canvas Menue / Submenue

JD

Joerg Distler

Helix Framework 1 day ago

Hi! How can I change the font size in the menu? 1.5 rem / submenu 1.4 rem, further submenu 1.3. Is it also possible to change the direction of the menu arrow?

Best Jörg

0
Website
https://www.ilaine-distler.de
5 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 23 hours ago #222709

Remove previous css, try this:

/* Top level */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
}

/* First submenu */
.offcanvas-menu ul.menu .menu-child > li > a,
.offcanvas-menu ul.menu .menu-child > li > span {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
}

/* Deeper submenu */
.offcanvas-menu ul.menu .menu-child .menu-child > li > a,
.offcanvas-menu ul.menu .menu-child .menu-child > li > span {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
}

Thanks

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 day ago #222702

Hi Jörg,

Thanks for reaching out to us.

You can control both the font sizes and the submenu arrow direction using custom CSS.

🔤 Font sizes (Off-Canvas menu)

Add the following to your custom CSS:

.offcanvas-menu .menu a {
    font-size: 1.5rem;
}
/* First level submenu */
.offcanvas-menu .menu .menu-child a {
    font-size: 1.4rem;
}
/* Deeper submenu levels */
.offcanvas-menu .menu .menu-child .menu-child a {
    font-size: 1.3rem;
}

➡️ Change submenu arrow direction

To adjust the arrow direction, use:

.offcanvas-menu .menu-toggler::after {
    transform: rotate(90deg);
}

You can adjust the rotation as needed:

* 90deg → right
* 0deg → down
* -90deg → left

Let me know is it help or not.

Best Regards,

0
JD
Joerg Distler
Accepted Answer
23 hours ago #222705

Hey Thank you for the answer. I added the first code to the CSS, but it's not displaying correctly. The font size of the main menu is fine, the first submenu hasn't changed, but the sub-submenu is in uppercase. What's wrong here?

Best regards!

Jörg

0
JD
Joerg Distler
Accepted Answer
23 hours ago #222712

Thank you very much!! Good Luck! Have a great day!

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 22 hours ago #222716

You are welcome. We greatly value your opinion and would love to hear your feedback about SP Page Builder. If you could spare a moment, it would mean a lot to us!

You can share your review here:

Joomla Extensions Directory

Trustpilot

0