Collapsed menu for tablet in landscape view

[Dan1el]

Hello, is it possible to set the collapsed menu for tablets that are in landscape view? The reason is that my menu text items are not displaying correctly on tab view when swiping to landscape.

Many thanks
Daniel

[ruenel]

Hello @Dan1el,

Thanks for writing in! We only have extra-large, large, medium, tablet and small screens for the responsive settings. We do not have a landscape or portrait view. In most cases, the tablet view is the portrait and the medium view is for the landscape when you are using handheld devices.

Hope this helps.

[Dan1el]

Thanks for the reply, it doesn’t really help to answer my question.

What would you suggest for the best work around?

Dan

[christian]

Hey Dan,

We’re sorry for the confusion. This is only a matter of knowing what breakpoint covers the screen size you need as mobile devices vary in screen size. For example, iPad’s landscape screen size is 1024 x 768 and its portrait size is the reverse of that (768 x 1024). It’s the width size that should be taken into account here and that is 1024 for landscape and 768 for portrait.

Now that you know the values, base your Hide During Breakpoints setup on them. That means that on landscape, you should hide the Navigation Inline element using the Hide During Breakpoints option and show the Navigation Collapsed. Take a look at the screenshot below. The icon is just a laptop but the most important thing is the coverage of screen size which is 980px - 1199px. Remember the landscape size of the iPad is 1024. It is within the LG range.

-----------------------------------------------------------------------------------

Now, iPad Pro is still a tablet but its landscape screen size is 1366 x 1024. The width, 1366, is no longer within the range of the LG breakpoint. If your menu still does not fit this range, you will need to consider redesigning your header. Perhaps shaving some space between menus or removing some menu items. You will not want to utilize the XL range because that is the last breakpoint. There’s no point using the Hide During Breakpoints feature if you’re going to display a Navigation Collapsed in all screen size. Just saying this to add to your knowledge.

Hope that helps.

[Dan1el]

Thanks very much for your detailed reply, based on this info, do you think it would be better to maybe make the logo smaller if its within a screen size?

Can this be done, if so is it a better work around?

Daniel

[ruenel]

Hello Daniel,

To resolve your issue, please edit your header and click the image. Find the “Customize” tab and insert this element css:

@media(min-width: 980px) and (max-width: 1199px){
    .e188-5.x-image img {
        max-width: 150px;
        height: auto;
    }
}

This code should resize the image when your screen size is between 980px to 1199px.

[Dan1el]

Thank you very much for that info. Worked spot on.

[christian]

We’re glad that the custom code worked. I just like to warn you however that you must not change the position of the image or add any element in your header because otherwise, the code will not work anymore.

That is because the dynamic class was used in there. The dynamic class is .e188-5. You should use $el instead of that. You can learn more from our Element CSS documentation.

-----------------------------------------------------------------------------------

I’m happy that you now know about the Element CSS feature. Just bear in mind though that you need to know CSS if you’re going to use the feature. We’re happy to provide minor CSS tweaks here but generally, that is custom development and it is outside the scope of our theme support.

With that said, instead of using CSS here, I’d recommend duplicating your Image and use the Hide During Breakpoints option to hide/show based on screen width. I know this is an extra step but this setup is more predictable.

Thanks.