Mobile navbar missing

[lervous1961]

hi,
I put my header position fixed left.
But when using my phone, I don’t see the mobile navbar button
Can you help me to fix this ?
thanks

[jade]

Hello Jean,

I have checked your site and there seems to be some stray html tags that could be the root cause of the issue:

Please go to X > Theme Options > Header > Topbar Content then make sure that the HTML tags you have added in the section are properly paired and closed.

For example, if you have <a href="mailto:info@belzonaquebec.com" target="_blank"> please make sure you have the closing <a>tag.

Then please get rid of these codes you have added:

these are causing the mobile button to be misplaced.

Hope this helps.

[lervous1961]

Hi,
I removed the top bar for testing and the problem is still there
thanks

[nabeel]

Hey Jean,

I checked your site and the mobile button is not visible because of the custom CSS you have added in the theme as pointed by Jade. Please find and remove the following CSS to fix the issue.

Don’t forget to clear all caches including your browser’s cache after removing the conflicting code. Let us know how this goes!

[lervous1961]

thank you. It’s working now

Just one thing. I realize that with smaller screen (like Ipad) when I click on produits and application, I can’t see the full dropdown of the products… is it possible to had a scrolling bar or any other solutions ?
Maybe move up the submenu
thanks

[nabeel]

Hello Jean,

I checked your sub menu in mobile devices and the menu is scrollable, however you have made CSS customization which makes the mobile menu dropdown overlap the site content, you can fix it by removing the following code:

Hopefully this will also fix your scrolling problem too. Let us know how this gors!

[lervous1961]

thanks
that make more visible the text but not 100%. What can I do now ?
Also my client says that when on pc, the dropdown not shows all the dropdown submenu on screen
How I can fix that ?
thanks again

[jade]

Hello Jean,

The misalignment in mobile is caused by the negative top margin you have added to the Nos produits les plus populaires section:

If you want that section to go closer to the section above it on desktop, try setting the section’s top padding to 0 and the top margin to 0 instead.

As for the dropdowns on desktop version, I checked it and they are all displaying without any issue:

Can you please double check?

Thank you.

[lervous1961]

hi
thank for the info
depending of the resolution of the screen and the size of it, we don’t see all the products in the dropdown.
I have a 13inches macbook and I don’t see all
What we can do ?
thanks

[ruenel]

Hello Jean,

In smaller screens, there is no room to scroll anymore. I would recommend that you update your css code:

.x-navbar .desktop .x-nav>li ul {
    top: 40px !important;
}

and turn it into this code instead:

.x-navbar .desktop .x-nav>li ul {
    top: -150% !important;
}

so that you have this layout:

• 

We would love to know if this has worked for you. Thank you.

[lervous1961]

hi
that working great.
I would like to thanks you all for helping me.
Have a nice day.

[friech]

We are delighted to assist you with this.

Have a nice weekend,