Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Mega Menu first level full width

Featured Lock Resolved
Hello there,
I would like to make the first level menu voices of Mega Menu in full width mode. Regardless of how many top-level entries there are, I would like them to adjust the width automatically. How can I do this, please? Thanks

11 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi, Please share a screenshot that you want to do exactly. Thanks

Gianluca Pantaleo

More than a month ago #Permalink
Here the screenshot, hope to hear you soon. Thanks.
menu100.jpg

Attachments (1)

  • menu100.jpg
    menu100.jpg 521.8 KB

Toufiq - Staff

More than a month ago #Permalink
Hi,

Have to write down css for this. You can share your site url.

-Thanks

Gianluca Pantaleo

More than a month ago #Permalink
here the site url

Toufiq - Staff

More than a month ago #Permalink
Hi,

Add this css code inside custom.css file

create a custom.css file inside template/your_template/css/custom.css


.sp-megamenu-parent > li > a {
font-size: 16px;
line-height: 18px;
padding: 15px 49.5px 15px 49.5px;
text-transform: uppercase;
min-width: 154px;
text-align: center;
}


-Thanks

Gianluca Pantaleo

More than a month ago #Permalink
I'm sorry man but your solution doesn't works, it makes a fixed voices width and it works if I have exactly 6 voices. I would like something automatic so I tried a personal solution and in seems to work:

.sp-megamenu-parent { float: none; display: table; width: 100%; }
.sp-megamenu-parent > li { display: table-cell; }
.sp-megamenu-parent > li > a { display: block; }


Hope that this functionality can be added in future helix releases.

Toufiq - Staff

More than a month ago #Permalink
I'm sorry man but your solution doesn't works, it makes a fixed voices width and it works if I have exactly 6 voices. I would like something automatic so I tried a personal solution and in seems to work:

.sp-megamenu-parent { float: none; display: table; width: 100%; }
.sp-megamenu-parent > li { display: table-cell; }
.sp-megamenu-parent > li > a { display: block; }


Hope that this functionality can be added in future helix releases.


Hi, Thanks for your reply. We will try to add in future. Thanks

pepperstreet

More than a month ago #Permalink
Hope that this functionality can be added in future helix releases.


Yes, "display table" property is one solution. I remember there was a small bug in older webkit browsers, but I can't recall the exact issue. Probably no big deal, nowadays.

FYI – here is another possible solution, based on CSS FlexBox:


.sp-megamenu-parent {
float: none;
display: flex;
justify-content: space-around;
}

exotica

More than a month ago #Permalink
Hope that this functionality can be added in future helix releases.


Yes, "display table" property is one solution. I remember there was a small bug in older webkit browsers, but I can't recall the exact issue. Probably no big deal, nowadays.

FYI – here is another possible solution, based on CSS FlexBox:


.sp-megamenu-parent {
float: none;
display: flex;
justify-content: space-around;
}



The problem with this solution is that the caret (arrow down) of the menu item moves down to the next line creating a very weird look.

Attachments (1)

  • menu_problem.png
    menu_problem.png 17.6 KB

Toufiq - Staff

More than a month ago #Permalink
Hope that this functionality can be added in future helix releases.


Yes, "display table" property is one solution. I remember there was a small bug in older webkit browsers, but I can't recall the exact issue. Probably no big deal, nowadays.

FYI – here is another possible solution, based on CSS FlexBox:


.sp-megamenu-parent {
float: none;
display: flex;
justify-content: space-around;
}



The problem with this solution is that the caret (arrow down) of the menu item moves down to the next line creating a very weird look.


Hi, Please create a new forum post. Thanks

pepperstreet

More than a month ago #Permalink
CSS FlexBox ... The problem with this solution is that the caret (arrow down) of the menu item moves down to the next line creating a very weird look.


As far as I can tell it works in Helix3 default template. No issues with "carets" in any level:
helix3_megamenu_evenly_spread_items_css_flexbox.png

Attachments (1)

  • helix3_megamenu_evenly_spread_items_css_flexbox.png
    helix3_megamenu_evenly_spread_items_css_flexbox.png 70.7 KB


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 105
Toufiq

Toufiq

Total Accepted Answers: 57
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 28
Ofi Khan

Ofi Khan

Total Accepted Answers: 11
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 8

120

Templates

310416

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us