Cheers. Anybody knows if I can change properly the mobile breaking point of the wordpress navigation block (wp-block-navigation) for example in theme.json or over functions.php? There is a css solution (--> answers below), but I would be still curious if there is a way without having a css overwrite battle. Thx :)

CodePudding user response：

There is multiple ways to set breakpoints in CSS, you can modify and set different standard sizes or custom size as you wish. Here you have some common breakpoints for devices with different screen sizes:

• Between 320px — 480px for Mobile devices
• Between 481px — 768px for iPads, Tablets
• Between 769px — 1024px for Small screens, laptops
• Between 1025px — 1200px for Desktops, large screens
• Between 1201px and more  for  Extra large screens, TV

By using these CSS breakpoints, you can create a responsive website.

So in you scenario, if you want to change the css of "wp-block-navigation" only on mobile devices, you have to add the css codes below to the bottom line of your custom css file. (Use child-theme if you want to modify your theme design)

/* For small screen devices (480px and below) */
@media only screen and (max-width: 480px) {
   .wp-block-navigation {
     /* Add your custom styles here */
   }
}

As I said earlier, you can change the size of (max-width: 480px) as you wish or use a specific ranges of screen sizes (from Xpx to Ypx), like this:

/* For screen sizes from 480px to 600px */
@media only screen and (min-width: 480px) and (max-width: 600px){
   .wp-block-navigation {
     /* Add your custom styles here */
   }
}

In this way, your changes will only appears on those devices which has minimum screen size of 480px and maximum size of 600px

For more tutorial and better understanding, I'll recommend you to visit this link and do some testes before make any changes on your actual css files.

I hope this answer helps you. Cheers ;)

CodePudding user response：

After getting the right direction from the answers given, below is the css needed to change the default breaking point of 600px to 1000px. It's a bit ugly using !important, but as it seems like there is no filter or settings (for example in theme.json) this is the only working way I found, to neutralize wp defaults.

/* copy of wp default css to a 1000px media query */
@media (min-width: 1000px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

/* neutralize the wp default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}