- Priority: 0
- Status: Waiting on customer
- Theme: Alysum
-
Assigned To:
Fred
- Private: No
- Open Date: 07.03.24, 10:20
- Opened by: Fabrice Druart
Ticket #25380 - MOBILE HEADER BUG
Hello,
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
Comments
Reduce the 'padding' I'm sorry ;)
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 } }Hello,
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.
You can add that code in Theme Settings → Customer CSS
Hello,
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 ;)
I don't have this problem when I disable the 'Sticky Header' but my client wants the mobile menu to remain visible when scrolling.
One more fix for scrolling:
@media (max-width: 1024px) { body:has(#top-menu[style="display: block;"]) { overflow: hidden; } #top-menu { overflow: auto; } }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
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 } }Thank you so much, you're really top-notch!
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…
Attachments:
What extension do you use to check that?
I have checked with my one and everything seems to be correct https://take.ms/b2jf1
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.
I use "headingsmap"
As for Web Developer, I can't find an option to check headings, can you please show it to me?
You can see the title structure by going to "Information" and then "View document outline" on the right.
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
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.
Attachments:
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 )
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
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.
Attachments:
Please update credentials in your profile https://support.promokit.eu/myprofile to access to your Back-office
You can log in via the BO access on my account. I have just reactivated the access.
When I go to dropdown menu template editor I see that H2 tag → https://take.ms/laGHu so just remove it there
How do I access the dropdown menu? I don't see it anywhere in Prestashop…? You're really good, congratulations.
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
Yes, I found it. It's weird, there are some titles I can't find via CE. How can I reduce my mobile header?
You can create separated template and assign it for mobile screens in Theme Settings → Header → Mobile header
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.
And I can't change the mobile leader. I can't modify anything on mobile via CE.
I managed to shorten it using the custom case. No more questions for now. Thank you for your help.
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
Yes, I see. At the moment the only option is to add that banner into the mobile header template manually
And what do you think is the best way to do this manually?
You can add it into this file