The menu items appear throughout header at ipad.

[liekecomp2022]

The menu at https://ontwikkel16.comp-it-aut.nl/ appears throughout the header.
At android it works fine.

How can I fix this in Joomla 5 with SP page builder 3.8.10?

[liekecomp2022]

I have for now changed the module of the header with two blank lines above the picture.
See https://ontwikkel16.comp-it-aut.nl/

The menu items fit now, however the white space between the menu items and the header is too big now.

What is the best way to solve this?
Put the header picture at the Welkom page with SP Page builder? How can the picture be full screen width?

[Pavel-ww]

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: Select all

#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: Select all

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

[liekecomp2022]

I have done it.
How can I get the header at welcome scaled al every device?
Now it does not fit correctly so the picture is visible as a whole.
See https://ontwikkel16.comp-it-aut.nl/

[liekecomp2022]

What is the best way to get a good header at the website?
Make a sytem module and place it at the position content-top at the welcome page?
Or
Place the header image at the top of the welcome page using sp page builder?
And what do you use? The text item or the image item or?
And what should the width and the height be when the image should be page width?

[Pavel-ww]

How can I get the header at welcome scaled al every device?

Hi.

Remove paddings from the section settings and use CSS

Code: Select all

#section-id-1734346422632 {
	aspect-ratio: 1284/384;
}

aspect-ratio value = image proportions

1.jpg

What is the best way to get a good header at the website?

The only way to always do everything as you want is to increase your HTML/CSS skills. Even if you work in SPPB, these skills will help you use the correct settings.

And also come to an understanding of the behavior of elements. For example, understand the difference between <img> and a background image.

Any of the methods you listed can be decisive depending on the situation and your skills