Adjust Breakpoints (Hide During Breakpoint feature)

[arscommunication]

Hi there

On our website we have quite a lot menu items. That’s why I created a desktop and a mobile header.
I only enabled the desktop header version with the inline menu for large desktops and the mobile version for any other size. Still, when I resize the browser window it seems to switch quite late. The window has to be that small, so that the menui items overlap with the button on the right side (see screenshot).

Is there a way to avoid that, so that it switches even faster to the mobile header version?
This is the URL of the referred website: https://wwcc2021.com/

Thank you very much for your feedback.

Best, Christian

[christian]

Hey Christian,

Regretfully, we currently don’t have a breakpoint that could break the XL size. What you could do is create your own classes and media queries. An example of that would be the following code:

@media (min-width: 1200px) and (max-width: 1400px) {
  .hide-between-1200-and-1400 {
     display: none;
  }
  .show-between-1200-and-1400 {
     display: block;
  }
}

Using that code, you basically could hide elements between the 1200px to 1400px screen size by inserting hide-between-1200-and-1400 in the element’s Class field. The opposite of that is show-between-1200-and-1400.

To learn more about Media Queries, please read this resource: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please just note that we do not offer custom development as part of our theme support. It would be the user’s responsibility to tweak or enhance the sample code provided. We will not support issues that would arise from the use of custom codes.

Hope that helps and thank you for understanding.

[arscommunication]

Hi Christian

Thank you very much for your reply. I will see if it works for me in this special case, but it surely is a good workaround.

Best,
Christian

[christopher]

Glad that we could be of help .