Header Layout Issue Tablet Landscape/Portrait - Forum | JoomShaper
Solved Templates

Header Layout Issue Tablet Landscape/Portrait

Asked by conshelf 5 years ago Last activity 5 years ago

Hello,

I'm having an issue with the header layout on the Newsberg template, when you view on an iPad in lanscape mode the full menu still shows and breaks the layout.

I'm also having a strange issue with the header in portrait mode. On every other page of the site the header is fine, as you can see here: https://www.oceannews.com/news/science-technology/

But when you view it on the home page https://www.oceannews.com/ in portrait mode the header shifts far over to the right.

Kind regards,
John

Accepted answer

Marked as the solution
conshelf Asked this
5 years ago · edited

Hello,

I fixed the issue by adding the following CSS.

@media (max-width: 1199px) {
.sp-megamenu-parent > li:not(:last-child) {
    margin-right: 10px!important;    
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 13px!important;
}
}

Would be nice if there was a setting for this in Helix Ultimate or a setting to force the hamburger menu options for landscape mode when viewing on a tablet.

Kind regards,
John

2 more replies

conshelf Asked this

Hello,

I fixed the portrait issue with the header on the home page, is was the width on the Divider add-on. I think you should change the Divider width option from pixels to percentage. The pixel width settings push the divider outside of the container.

I still have the menu issue in Landscape mode.

Kind regards,
John

Mehtaz Afsana Borsha Staff

Hi,
Glad to know that. I will note it.
You can now resolve the answer and close this post

Log in to reply.