Support Forums

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

Your Time: Our Time:

Show mega menu on mobile

Featured Lock Resolved Task
Hello there,

i just have two menu items and want to show them on mobile and tablet view like mega menu instead of offcanvas. Does somebody know if this is possible?

Thank you!

12 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Try this method instead (fully alternative):

1) In template setting > Layout > change column size for the menu, I guess you need more space to put there 2 menu items. Now is "1" so change to "3"

I mean choose custom column grid and put there: 3,3,6

2) Change position "Menu" to "top3", change also default Mobile Layout from xs-col-1 to xs-col-4

3) To custom CSS add

#sp-header .sp-module ul > li {
display: inline-block;
border-bottom: 0;
padding-right: 10px;
}
#sp-header .sp-module ul > li > a::before { display: none;}
#sp-top3 {padding-top: 40px;}


4) Publish menu module with a chosen menu on position "top3" (without title)


Final Result
top3.png

Attachments (1)

  • top3.png
    top3.png 4.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
yes possible but request several lines of custom CSS to override default transformation.
----
Try this:


#sp-header i.fa-bars,
#offcanvas-toggler,
#sp-header #offcanvas-toggler i.fa-bars,
#offcanvas-toggler > i.fa {display: none !important; font-size:0; padding:0;}

#sp-menu .sp-megamenu-parent.hidden-sm.hidden-xs {display: block !important;}



------
I hope you've read Helix3 Manual how to use above code.


Close topic or let me know...

8ITS

More than a month ago #Permalink
Hi Paul,

thanks a lot for help.
I have set the code, but now no menu is displayed on mobile or tablet (neither offcanvas nor mega menu).

Paul Frankowski - Staff

More than a month ago #Permalink
Hmm,
I tested on my Helix3 site and worked well.

The first part of code hide mobile menu [=]
Second part - force to display Mega Menu everywhere.

Paul Frankowski - Staff

More than a month ago #Permalink
I tested on raw Helix3 maybe that's why. Sorry I forgot that Ares is different. Let me check moment.

8ITS

More than a month ago #Permalink
Hi Paul,

it is working. Thank you! One last question:
Is it possible to make the menu look exactly like the regular main menu? The menu is displayed at the moment, but does not look as nice as the normal menu.

Paul Frankowski - Staff

More than a month ago #Permalink
You mean font-size? Just add a few lines of custom CSS more.
You're a developer, right.
This is a classic menu, not megamenu.

8ITS

More than a month ago #Permalink
Hi Paul,

not just the font size. Yes, we´ve got the developer license. At the moment the menu looks like this (click here.) It would be nice if the menu looks like this (click here) on the desktop as well as on the mobile.

Paul Frankowski - Staff

More than a month ago #Permalink
Have you used both of my CSS codes?
I talk about

#sp-header .sp-module ul > li {
display: inline-block;
border-bottom: 0;
padding-right: 10px;
}
#sp-header .sp-module ul > li > a::before { display: none;}

Paul Frankowski - Staff

More than a month ago #Permalink
Effects like background under menu items and hover -- you should be able to add alone. Or you;re not developer?

8ITS

More than a month ago #Permalink
Hi Paul,

it´s working! Thank you.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 122
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 115
Toufiq

Toufiq

Total Accepted Answers: 62
Pavel

Pavel

Total Accepted Answers: 4
W

woonydanny

Total Accepted Answers: 2

100+

Templates

200,000+

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