Responsive Header Mobile

Hi there,

I’ve noticed that the header on you demo is responsive in my iPad hiding all the labels and adding the hamburger menu icon.

I don’t know why on my website is not responsive, I probably have to set it up. See imaged attached.

Thank you 🙂

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the site admin access to the private area so that we could check the site and the settings.

Best Regards

Thank you Elise

Hello,

1. Your menu has a lot of items and there is not space enough for it. Try to change the header layout and reduce the right column width. https://gyazo.com/c20f7e8081789684131e09cc7a35d7f8

2. Please update your theme and follow these suggestions in updating https://xtemos.com/docs/basel/faq-guides-2/4-x-5-0-migration-guide/ Please make the full backup of your site before the upgrade.

Best Regards

Hi there, thanks for replying. Sorry, maybe I didn’t explain myself properly. Basically your demo shows the mobile menu in the iPad resolution but my website shows the FULL menu.

I just need to have the mobile menu showing on my iPad (see attached image)

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Different header layout have different breakpoints for the mobile menu. Our demo site has e-commerce header layout. You have a Simple layout. Try different layouts to set the best.

Best Regards

Hi Elise,
I’ve just fixed it by myself using only css. Thanks anyway for the effort in helping me.
I’ve posted the code below. I believe it might help people with the same issue to fix it. Thank you!

@media (max-width: 1500px){

.main-header .main-nav{
display:none;
}

.header-full-width .main-header>.container {
padding-top: 10px;
padding-bottom: 10px;
}

.sticky-header {
padding-top: 5px;
padding-bottom: 5px;
}

.right-column .mobile-nav-icon {
display: inline-block;
}

body, html {
max-width: 100%;
}

.document-ready .mobile-nav {
display: inline-block;}

.sticky-header .main-nav {
display:none;
}

.site-logo {
width: 50%;
}

.right-column {
width: 50%;
}
}

Hello,

Thank you for sharing the code. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts