Support Forums

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

Your Time: Our Time:

Horizontal menu with more items - overflow from its position

Featured Lock Resolved Issue
Hello,

if I have horizontal menu with more items - it overflows from its position (sp header) on devices like tablet. How can I fix this to not overflow it?
SP Header can be on this specific devices higher to ensure that menu items will not be outside.
Or there can be just menu icon like on mobiles (vertical menu after clicking on "3 lines" icon).

Thank you.

Attachments (1)

  • sample.jpg
    sample.jpg 116.3 KB

5 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi/Ahoj,
it requests extra custom CSS for tablet resolution.

1) Share site URL
2) Tell me about what resolution we are talking about, screen width 1024px?

Juraj Ziak

More than a month ago #Permalink
Hello Paul,

I can't put site online yet as it's not 100% ready. We are talking about resolution which you can find on most tablets, or new phones when you put them to horizontal mode - so it should be something like 1080 or 1024 as you've mentioned. Same can be simulated in Chrome developer tools if more menu items are in left and righ main menu.

Paul Frankowski - Staff

More than a month ago #Permalink
Ok, in that case, try this custom CSS.
It will reduce space between items/objects and font-size of them.

@media (max-width: 1024px) {
.sp-megamenu-parent > li {margin: 0 6px;}
.sp-megamenu-parent > li > a {font-size: 12px;}
#sp-menu1 .sp-megamenu-parent {padding: 0 10px 0 0;}
#sp-menu2 .sp-megamenu-parent {padding: 0 0 0 10px;}
}

Juraj Ziak

More than a month ago #Permalink
Hello Paul,

thank you for your interest, however it didn't help, font size had to be unreadable to make it visible inline in one row. Better will be modification of the header bar where menu items are visible. So it will have double height in case of low resolution, so second row of menu items will be still inside the header, not on the picture below the header.

Could you please help me with writing custom css code? Another option will be to show "mobile menu" in case of displays with lower resolution.

Thank you once again.

Juraj Ziak

More than a month ago #Permalink
Hi Paul,

One more idea how can be this fixed. As I've desbribed, if there are more menu items, there is new row with additional menu items created which overflows from header position. Space between first and second rows is too big. If it will be possible to minimize space between two rows, it could solve the issue without changing height of the header bar. However I am not sure if this is possible because it could negatively influent also the first row ( if we would change lets say margins or paddings).

Thnak you.


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

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 132
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 26
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289847

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