[Support request] Merged Header works on desktop/laptop but not on tablet

[Jacob]

Hi Leo & Tom,

I have merged the header with the content and it works fine on the desktop and laptop version, as I have adjusted the ‘top and bottom padding’ in ‘page header’ accordingly. For the mobile version I have activated the mobile header, so this one looks fine as well. However, on the tablet version the main menu overlaps heavily with the content. So I see two approaches to this problem: 1) Can I somehow adjust the tablet ‘top & bottom padding’ separately from desktop/laptop ‘top and bottom padding’? 2) Alternatively, I want the tablet menu look like the mobile menu. Do you have any suggestions to solve this issue either with the mentioned approaches, or even offer further ways to achieve an acceptable solution?

Thanks in advance and kind regards,
Jacob

[Jacob]

I just found out that when I turn the tablet by 90 degrees (upright) the menu switches to the mobile menu. Is there a way to alter the pixel width at which it shows the mobile menu instead of the regular?

Best,
Jacob

[Leo]

Hi Jacob,

You can use this CSS to change the mobile header breakpoint: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

It can only be increased as for now.

We will be making this into a feature in the future 🙂

Let me know if this helps.

[Jacob]

Hi Leo,

Thanks for the reply. During my research yesterday I found this article already and implemented it. For the menu it works, but there are still two problems left.

1) As I stated in one of my earlier posts, I split the header into three different parts. The problem on tablets is, that the header apparently is to large and the content of the center and the right header section moves to the next row. The content of the right header section is the search form, which I would like to have removed on the tablet version as the search form is already included into the mobile menu (which I am using on the tablet version now via your suggestion of the header mobile breakpoint CSS). Is there a way to remove the right header widget content (search form) from the tablet version?

2) In one of my earlier posts I had the problem (bug), that the search magnifying glass interfered with my ‘cart’ text within the mobile menu. The problem was solved by adding the CSS code I was then told to use. But now the same problem exists with the tablet menu.

Do you have any suggestions to solve these two issues?

Thanks in advance and kind regards,
Jacob

[Jacob]

Hi Leo,

I have tried some stuff by myself:

1) I have hidden the content of the right header widget (search form) by adding some CSS and it works fine:

@media(max-width:1024px){
.widget#siteorigin-panels-builder-9 {
display:none;
}
}

2) I have tried altering the size of the header center content. No matter how small I resize the image by adding CSS (following your instructions and adapting to the defined class on https://generatepress.com/forums/topic/search-in-full-screen/#post-504209), it always moves to the next line. How do I stop the image from moving to the next line even though there is enough space? I have temporarily hidden this content as well by using the same method as above.

3) The problem with the interfering magnifying glass with the ‘cart’ text still exists for tablets only (mobile is still working fine).

Thanks in advance and kind regards,
Jacob

[Leo]

1) You can also use the built in hide-on classes: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

2) Can you unhide it so I can see the problem again?

3) That’s a bug which will be fixed in the next version 🙂

[Jacob]

Hi Leo,

Thanks for your reply.

1) Is this a better way to hide the content?

2) I can do that. Since the page is live, I would prefer to unhide at the moment when you are able to check it. Can you please give me a notice when you are able to check it?

3) I know that this is a bug of the current version, since you provided a workaround for the mobile version. Can you provide a workaround for the tablet version as well?

[Leo]

1) It’s basically the same as what you are doing. So you don’t need your extra CSS.

2) That wouldn’t work very well unfortunately as we do rounds with the support topics and I think we are in a different time zone. Can you duplicate the problem on a test server?

3) Would you mind testing the beta to see if it fixes the problem?
https://docs.generatepress.com/article/beta-testing/

We should be releasing the official version either today or tomorrow.

[Jacob]

1) Ok, I will leave it the way it is than.

2) I will unhide it now. Would be great if you could check it soon. Don’t worry about the time zone though, I will be in the office for another couple of hours today 😉

3) I would rather wait for the release then, as I still have another couple of tasks to do today.

[Jacob]

2) It unhidden now

[Leo]

I think if you try setting the tablet and mobile grid it should work: https://docs.generatepress.com/article/creating-columns/#using-built-in-unsemantic-grid

Let me know if this helps.

[Jacob]

Hi Leo,

I have updated to the new GP Version today. Unfortunately, the issue with the interfering magnifying glass with the cart icon/text is still present on tablets. Can you provide help with this issue please?

[Tom]

Just testing it out here and I’m not seeing any issue: http://tomusborne.com/demo/

Perhaps you have some conflicting CSS?

[Author]

Posts