3 Submenu Styling Problems On A Mega Menu With Helix Ultimate - Question | JoomShaper
Back to the questions

3 Submenu Styling Problems On A Mega Menu With Helix Ultimate

CP

Christopher Parthier

Template 5 days ago

I just started a new site and ran into some problems.

SP Page builder Pro 6.2.2 Helix ultimate 2.2.3 Joomla 6.0.1

I try to achieve the following:

The submenu items of the megamenu I created shall appear on a background that stretches from the left end to the right end of the screen just like the sections of the pagebuilder pages. I set the menu width to 100% in the template settings menu > megamenu item properties but there is a gap on both sides

Secondly I want the white background of the submenu to be a bit translucent so that you can see a bit of the content behind something like 70% opacity.

Third problem. The letters of the submenu of the megamenu are all in uppercase letters. I didn't change anything there. How did this happen and how can I change that back to normal settings?

http://www.lesparthiers.de/screenshot_megamenu.png

Thanks for your advice.

0
5 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 days ago #214256

Hi

Thanks for contacting us and sorry for your issue, Could you please give me your site URL? So that I can check.

-Regards.

0
CP
Christopher Parthier
Accepted Answer
4 days ago #214316

Thanks for the quick response. I send you the URL

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 days ago #214355

Hi

Do you want it like this? Then you can use this CSS in your custom.css file

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
    font-size: 16px !important;
        }
0
CP
Christopher Parthier
Accepted Answer
4 days ago #214370

I'd like it to look like on this page as for the width of the submenu und the translucency: https://zukunftsprozess.kathma.de

The background of the Submenu of the Megamenu on that page stretches across the whole browser width.

but it still doesn't stretch from end to end.

As for the text styling, I just put your code into my custom CSS field of the Helix template. I set up two Mega Menus now - the first I did looks different for linked items and such that I placed just as "Menu Heading" without them being linked.

I set the Typography for Navigation to Helvetica Thin. This works for the first level of the menu but for the submenu it only works when I choose the default menu - then the text is also Helvetica Thin. When I choose the Megamenu the font changes to a) Helvetica, uppercase, 14px, weight 600 when the item is linked to a page b) Helvetica, 1.2rem (as set for general fontsize) when I set a menu Item that isn't linked to an article butr is just a "menu heading"

I'd like all levels of the menu to be in helvetica thin with 1.2rem of size without uppercase.

and wich css settings do I have to change when I want to change the colour of a module heading in bottom positions. I didn't find a setting in the helix template where I could change the color of a module heading in the bottom positions.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 days ago #214416

You can use this CSS in your custom.css file.

span.sp-group-title.sp-menu-heading {
    font-family: 'Helvetica', sans-serif !important;
        font-weight: 100 !important;
    color: #d9594c !important;
        font-size: 1.25 rem !important;
}
.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: 'Helvetica', sans-serif !important;
        font-weight: 100 !important;
    color: #d9594c !important;
        font-size: 1.25 rem !important;
}
.sp-megamenu-parent .sp-mega-group>li>a {
    font-family: 'Helvetica', sans-serif !important;
    font-weight: 100 !important;
    color: #d9594c !important;
    font-size: 1.25 rem !important;
}

I prefer you should see this tutorial and make your dropdown menu again, and change all these changes from settings.

https://www.youtube.com/watch?v=DAme45jfoa0&t=1s

0