Responsive and @media rule

Home Forums Icelander Responsive and @media rule

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17006

    objectif-multimedia
    Participant

    Responsive and @media rule

    Resolved

    Hi,
    I would like to know if there is a solution to modify the value of media query (min-width) in Icelander theme ?

    Thank you.

    #17007

    Oliver Juhas
    Keymaster

    Hi objectif-multimedia,

    What do you mean exactly, which media query? You can simply modify any of those using your custom CSS overrides :)

    The theme’s predefined media query breakpoints were chosen very carefully to cover most of the devices. I’ve actually used https://www.browserstack.com/responsive to determine those as carefully as I could.

    Best regards,

    Oliver Juhas
    WebMan Design

    #17008

    objectif-multimedia
    Participant

    Thanks for you answer,

    I would like to switch the menu to tablet mode earlier. I have a lot of item in the main menu and it appears on two lines.

    (PJ menu.jpg)

    Marc

    #17014

    Oliver Juhas
    Keymaster

    Hi Marc,

    If you don’t like that layout (that’s actually no issue, it’s by theme design and the menu is perfectly accessible), I would suggest you first to try non-code resolution.

    Redesign the menu structure:
    First I would try redesigning the menu, meaning rethinking its structure.

    Use a plugin:
    If you can’t do that, then you might try disabling the theme’s mobile menu functionality in Appearance → Customize → Theme Options → Others and use a plugin to add a mobile menu functionality to your website, while controlling when that mobile menu appears. Here is my quick search for mobile menu plugins (however, I don’t know how are they from accessibility point of view, if this is your concern too):

    Style the menu:
    You can also try not to force the mobile menu on larger screens, but rather style the menu on larger, affected, “ugly” screens to more pleasing design for you. This solution would probably be the best. You can try this custom CSS as an example:

    @media only screen and (min-width: 55em) and (max-width: 80em) {
      .main-navigation {
        width: 100%;
      }
    
      .main-navigation-container .menu > ul > li > a {
        padding: 0;
      }
    }

    Overriding mobile menu with code:
    Other than that you will need to use coding solution in your child theme. First, use this code in your child theme‘s functions.php file to tell theme’s mobile menu JavaScript when to run:

    function child_theme_javascript_breakpoints( $breakpoints ) {
      // Default value is 880px, change this to your needs:
      $breakpoints['l'] = 880; 
    
      return $breakpoints;
    }
    add_filter( 'wmhook_icelander_assets_enqueue_scripts_breakpoints', 'child_theme_javascript_breakpoints' );

    And then use custom CSS to trigger mobile menu navigation styles earlier. However, there is no real easy way of extracting these styles. You may want to have a look at these SASS files for the styles the theme uses for mobile menu:

    • icelander/assets/scss/main/menu/__menu-primary-mobile.scss
    • icelander/assets/scss/main/custom-styles/__menu.scss

    You can then build your override styles using those files as reference.

    I will try to come up with easier solution to this request, but please note that this is not an issue or a bug of the theme, it’s design decision.

    Best regards,

    Oliver Juhas
    WebMan Design

    #17015

    objectif-multimedia
    Participant

    Hi Oliver,

    Thank you for this detailed answer.
    I will try the “add_filter” solution and I will tell you if it works.
    Of course it’s not a bug of the theme, and I would really like to find a solution to continue with Icelander.

    Marc

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.