Quantcast
Channel: Joomla! Forum - community, help and support
Viewing all articles
Browse latest Browse all 1575

Templates for Joomla! 5.x • Re: The menu items appear throughout header at ipad.

$
0
0
I have for now changed the module of the header with two blank lines above the picture.
Hi.

This is not the right decision. To solve the problem, you need to determine the reason and fix it, but not create crutches.

In this case, it does not matter iPad or Android. This is not the right way of testing. Use the responsive mode in the your browser Dev Tools, reducing the screen width. And then you will completely see the reasons of the problem on screens of any width.


Sp Page Builder is not related to this. This applies to the template. The fact is that Header has a fixed height 150px. The menu is located inside the Header, but contains too many items that do not fit when the screen width is reduced and jumped to another line outside the height of the header.

Never use empty p tags and any tags at all (two blank lines above the picture) to solve layout problems. Remove them. Always use only CSS

Code:

#sp-header {height: auto;}.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: 50px;}
How can the picture be full screen width?
Delete this harmful code. Never use common selectors. This affects (in this case) on all images on the site. Use unique selectors to configure only the desired element.
2.jpg
--

After applying the recommendations, it will look like this
3.jpg
To configure the desired menu height, use your own value in the line-height property

Code:

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: YOUR_VALUE;}

Statistics: Posted by Pavel-ww — Fri Dec 13, 2024 8:05 am



Viewing all articles
Browse latest Browse all 1575

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>