Responsive Header Mobile

This topic has 7 replies, 2 voices, and was last updated 5 years, 4 months ago by Elise Noromit.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 24, 2019 at 5:26 pm #152213

matte.mar
Participant

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.

October 24, 2019 at 8:26 pm #152252

Elise Noromit
Member

Hello,

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

Best Regards

October 24, 2019 at 8:28 pm #152254

matte.mar
Participant

Thank you Elise

October 25, 2019 at 7:38 am #152321

Elise Noromit
Member

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

October 25, 2019 at 12:00 pm #152364

matte.mar
Participant

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.

October 25, 2019 at 3:30 pm #152416

Elise Noromit
Member

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

October 25, 2019 at 10:00 pm #152488

matte.mar
Participant

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%;
}
}

October 26, 2019 at 9:07 am #152518

Elise Noromit
Member

Hello,

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

Best Regards
Author

Posts