custom css code for Menu - Forum | JoomShaper
Staff replied Helix Framework

custom css code for Menu

Asked by Joerg Distler 4 years ago Last activity 4 years ago

Hi,

may I have the custom css code to use also font-family: Architects Daughter for the menu.
Thank you!
Best Jörg

7 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago

Hi there!

Thanks for your query.

You can do this with the help of your Typography section of the Template Options either.

Here is a screenshot for your ease: https://prnt.sc/B5ELYZLj2Ft-

Hope this helps!

Best Regards

Joerg Distler Asked this
4 years ago

Hi Rashida,

thank you. This is for me not possible, because we cannot use google font directly from the google server.
(german dsgvo).

May I have a custum css code to use the type.

I take this code for the offcanvas menu.
.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span { font-family: "Architects Daughter"; }

May I have the custom css code for mega menue?

Paul Frankowski Senior Staff
4 years ago · edited

Hi Joerg,

It's also very easy:

#sp-menu .sp-megamenu-parent > li > a, 
#sp-menu .sp-megamenu-parent > li > span  {  font-family: "Architects Daughter";  }

After using above CSS code it should look like that

foto_8242_2022.jpg

Joerg Distler Asked this
4 years ago

Hello Paul ,

thank you. May I have also the custom code for the Dropdown Menu and last the custom css for the font size... .
Best Jörg

Rashida Rahman Staff
4 years ago

Hello,

Here is the code all together:

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    font-family: 'Architects Daughter';
    font-size: 19px;
}

Kindly, use this code in your custom CSS. You may adjust the font size value as per your need.

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Joerg Distler Asked this
4 years ago

Hello Rashida,

thank you.

Rashida Rahman Staff
4 years ago

You are always welcome:)

Log in to reply.