• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 07.03.24, 10:20
  • Opened by: Fabrice Druart
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #25380 - MOBILE HEADER BUG

I have several problems with my site. The first problem is the mobile header. When I unroll the menu, when I scroll it’s the home page that scrolls and not the menu. I’d also like to reduce the ‘pudding’ in my mobile menu.
Can you help?
Thank you


Fabrice Druart 07 Mar 2024, 10:21

Reduce the 'padding' I'm sorry ;)

Fred 07 Mar 2024, 15:14

Hi, Fabrice.
You can easily fine a code you need to change using browser's developer tools → https://take.ms/GRJkx

Use this code:

@media (max-width: 1024px) {
    .pk-menu-horizontal #top-menu > li > a, .pk-menu-horizontal .pk-top-menu > li > a {
        padding: 10px 30px
Fabrice Druart 07 Mar 2024, 16:09

I've already tried to modify a theme file via my FTP. The problem is that I have several theme files and when I modify one, it bugs. Can you tell me how I should go about adding the css code you gave me…?
I also don't know if reducing the padding will solve the problem with my mobile leader menu.

Fred 07 Mar 2024, 20:53

You can add that code in Theme Settings → Customer CSS

Fabrice Druart 08 Mar 2024, 15:24

Thanks for the information. My mobile leader menu is smaller. However, I still have a problem when I want to scroll in my submenu, it scrolls my home page.
I don't know if I'm making myself clear but you can test the menu on your mobile, you'll understand ;)

Fabrice Druart 08 Mar 2024, 15:28

I don't have this problem when I disable the 'Sticky Header' but my client wants the mobile menu to remain visible when scrolling.

Fred 09 Mar 2024, 10:38

One more fix for scrolling:

@media (max-width: 1024px) {
  body:has(#top-menu[style="display: block;"]) {
    overflow: hidden;
  #top-menu {
    overflow: auto;
Fabrice Druart 09 Mar 2024, 12:53

It still doesn't work. It no longer scrolls the home page, but when I scroll down a submenu, I can't see all the information displayed. For example, I'd like to see all the information when I click on 'Our stores'.
Thank you for your assistance

Fred 10 Mar 2024, 10:06

Yes, I see. Sorry, I missed that case.
Try this updated code

@media (max-width: 1024px) {
  body:has(#top-menu[style="display: block;"]) {
    overflow: hidden;
  #top-menu {
    overflow: scroll;
    height: 500px
Fabrice Druart 10 Mar 2024, 17:54

Thank you so much, you're really top-notch!

Fabrice Druart 10 Mar 2024, 18:03

I have another question about the title structure on my site. As you can see from my file, the titles are not well structured. For example, I have 'No heading text' or 'no concept stores' and I can't delete them.
The problem is the headings at the beginning, I can't modify or delete them…

Fred 11 Mar 2024, 08:54

What extension do you use to check that?
I have checked with my one and everything seems to be correct https://take.ms/b2jf1

Fabrice Druart 11 Mar 2024, 11:04

Hello, I use the "Web Developper" extension, how about you? It's weird, I have the impression that the titles are embedded in the menu and I don't know how to change that… I use the Promokit menu plug-in for the menu. You'll find a file with a screenshot of one of the titles.

Fred 11 Mar 2024, 22:28

I use "headingsmap"
As for Web Developer, I can't find an option to check headings, can you please show it to me?

Fabrice Druart 12 Mar 2024, 14:42

You can see the title structure by going to "Information" and then "View document outline" on the right.

Fred 12 Mar 2024, 20:37

Yes, I see. But it looks weird a bit. If you take a look at page source code you will not find H2 tag around Accessories for example → https://take.ms/4BucE

The report of HeadingMap looks more truth https://take.ms/knMl7

Fabrice Druart 13 Mar 2024, 11:20

When I search for title 2 in the console, I can see the titles displayed in "Web developper". What's weird is that I can't see where the titles are on my site. It's as if they were hidden. You can see on my screenshot. The H2 Acessoires is in a class with an h2.


Fabrice Druart 13 Mar 2024, 11:26

And I also see the "chaussures" and everything else too. If you do a search with h2 you'll see it… I think some titles come from the menu and others from the widgets ( search, language, favorite, cart )

Fred 13 Mar 2024, 11:29

Strange I didn't see it.
As I can see that's HTML widget, that's means the content of that widget is added by customer. Please check that in CE Editor and remove that H2 tag from there

Fabrice Druart 13 Mar 2024, 11:45

Yes, it's weird. When I only look at the home page in the editor, no problem, but when I only look at the menu, well, I see the titles. The problem is that I don't see any titles in CE.


menuCE.png (97.7 KiB)
Fred 14 Mar 2024, 09:50

Please update credentials in your profile https://support.promokit.eu/myprofile to access to your Back-office

Fabrice Druart 14 Mar 2024, 11:35

You can log in via the BO access on my account. I have just reactivated the access.

Fred 15 Mar 2024, 09:01

When I go to dropdown menu template editor I see that H2 tag → https://take.ms/laGHu so just remove it there

Fabrice Druart 15 Mar 2024, 10:28

How do I access the dropdown menu? I don't see it anywhere in Prestashop…? You're really good, congratulations.

Fred 15 Mar 2024, 11:07

I thought that's you assigned that template to a menu item
1. Navigate to a menu item, and see what template is assigned there
2. Navigate to Creative Elements → Saved Templates, find that template and edit it

Fabrice Druart 18 Mar 2024, 11:43

Yes, I found it. It's weird, there are some titles I can't find via CE. How can I reduce my mobile header?

Fred 18 Mar 2024, 11:57

You can create separated template and assign it for mobile screens in Theme Settings → Header → Mobile header

Fabrice Druart 18 Mar 2024, 12:11

I like the current mobile header but I'd just like to reduce the size of the header as it takes up a lot of space.

Fabrice Druart 18 Mar 2024, 12:24

And I can't change the mobile leader. I can't modify anything on mobile via CE.

Fabrice Druart 18 Mar 2024, 13:43

I managed to shorten it using the custom case. No more questions for now. Thank you for your help.

Fabrice Druart 18 Mar 2024, 15:00

Yes, I have one last question. On the pc format I have a black banner at the top "Delivery in Belgium from 150€ purchase" but I don't have it on mobile. Is it possible to have this banner on the mobile version too?
Thank you

Fred 18 Mar 2024, 18:58

Yes, I see. At the moment the only option is to add that banner into the mobile header template manually

Fabrice Druart 21 Mar 2024, 12:49

And what do you think is the best way to do this manually?

Fred 21 Mar 2024, 20:20

You can add it into this file