Feature Request: Define custom breakpoint for collapsible navigation menu

Home Forums Icelander Feature Request: Define custom breakpoint for collapsible navigation menu

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21323

    excaltech
    Participant

    Feature Request: Define custom breakpoint for collapsible navigation menu

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi Oliver,

    I’m not sure if anyone else has requested this as a feature before, but I think it would be very beneficial to be able to define a custom width at which the navigation menu is collapsed. The default of 880px that you referenced here I’m sure works great for many sites, but in my case the navigation menu spans the entire site content width, meaning it would benefit from a much larger breakpoint.

    I understand that there are some other ways to address this from the developer’s perspective, such as restructuring the menu links or using a responsive menu plugin, but I think that sometimes the menu structure as is makes the most sense for the particular website. I also prefer not to use plugins when the functionality I’m looking for can be achieved in a cleaner and less bulky way.

    I’ve managed to get the menu collapsing at a larger breakpoint after a lot of CSS inspection and replication, so I don’t actually need any assistance at this time. Just wanted to pass along my feedback on the matter. Still love Icelander overall and am very pleased with it.

    Thanks,

    Ben

    #21324

    Oliver Juhas
    Keymaster

    Hi Ben,

    Thank you for your suggestion. I have actually thought about this in the past. The reason why this is set this way is to accommodate for vast majority of cases.

    That is the difference between custom made theme and publicly available ones – you can tackle all aspects of custom made themes to your needs. For publicly available themes there is no chance they can accommodate every usercase.

    Also, currently this is technically impossible to achieve too. Even though the theme uses modern approach to CSS coding and using CSS variables, they are not supported in media queries, which are used for responsive design.
    (And custom stylesheet file generation was banned for WordPress themes even on ThemeForest several months ago. This theme actually used that approach in the past, which could technically provide the way to achieve your request. Unfortunately, I can no longer use this in WordPress themes. Fun fact: page builder plugins actually use this approach, so it is possible to set custom breakpoints in them.)

    So, unfortunately, there is no easy solution now. You can only achieve the desired effect using custom CSS and overriding the theme mobile menu styling. For reference, these are the theme SASS source files taking care of mobile menu styling : icelander/assets/scss/main/menu/__menu-primary-mobile.scss and icelander/assets/scss/main/custom-styles/__menu.scss.

    Alternative solution

    Having said all this, looking at your website I think the menu should work perfectly fine, as intended by theme design: the tablet/mobile menu should really only kick in for small screen sizes, it is not meant to be displayed on larger screen size. If the menu does not fit the screen width for larger screen sizes it simply breaks the last menu item(s) into a new line, which is perfectly usable.
    (You can see similar effect on theme demo website actually. Although it breaks additional secondary and social links menu to new lines, instead of the primary navigation menu items. But the effect is very similar.)

    If this is not desirable behavior for you, you could use one additional approach: fitting the menu to larger screens by tweaking the menu font size and gaps between menu items. It requires much less custom coding and could resolve your issue (depending on your needs).

    Here is an example:

    @media (min-width: 881px) and (max-width: 1580px) {
    	.main-navigation {
    		font-size: font-size: 16px;
    	}
    }
    
    @media (min-width: 881px) and (max-width: 1360px) {
    	.main-navigation-container .menu > ul > li {
    		margin-left: 2px;
    	}
    }

    Thank you for understanding.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21325

    excaltech
    Participant

    Hi Oliver,

    Thank you for your reply and consideration. You could have simply said that it’s not practical/possible to do, but you chose to really give a detailed description of the limitations and even some alternatives, and I really appreciate that. Great support!

    Thanks again,

    Ben

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

You must be logged in to reply to this topic.