Primary Navigation Menu Responsive Issue at 879px Width

Home Forums Reykjavik Primary Navigation Menu Responsive Issue at 879px Width

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

    gtntechsol
    Participant

    Primary Navigation Menu Responsive Issue at 879px Width

    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 →

    When the browser’s width shrinks to 879px the primary navigation menu switches to the hamburger menu located at the top. The issue is that right at 879px the vertical menu is stuck open (see attached screenshot) and you can’t use the hamburger menu to close it. This issue exists in the Reykjavik demo site as well as the Icelander demo site (and on the site I’m currently building – which isn’t public yet). The menu resumes normal functionality at 878px and below, but I’d like to fix the issue at 879px in the off chance that a user has their desktop or tablet browser set to that width. The issue persists in Chrome and Firefox. I didn’t test it in any other browsers. I started to override some of the CSS in an attempt to fix it, but the 880px breakpoint affects a lot of styles (and presumably JavaScript) and it was difficult to ascertain exactly which styles/JS I needed to override. Can you point me in the right direction?

    Thanks!

    #19358

    Oliver Juhas
    Keymaster

    Hi gtntechsol,

    I’m sorry, but I can not replicate your issue.
    Do you use a high resolution screen (so it caclulates for “half pixel”)?
    Or is your browser zoom set to value other than 100%?

    You can try to fix the issue applying this custom CSS:

    @media only screen and (max-width: 879px) {
    	.has-navigation-mobile .main-navigation-container {
    		visibility: hidden;
    		position: fixed;
    		width: 100%;
    		height: 100%;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		line-height: 1.38em;
    		overflow-y: auto;
    		z-index: 995;
    		opacity: 0;
    		-webkit-transform: scaleY(0);
    		-ms-transform: scaleY(0);
    		transform: scaleY(0);
    		-webkit-transform-origin: 50% 0;
    		-ms-transform-origin: 50% 0;
    		transform-origin: 50% 0;
    		transition: visibility 0s linear 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    		transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
    		transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    	}
    }

    But it should work just fine as the theme only uses 54.9375em value in @media query instead, which is actually 54.9375 * 16 = 879 pixels…

    Like I’ve mentioned, I’d say you might only experience an issue with some specific setup of a high resolution screen (when it is not scaled, or scaled oddly) when it accounts for “half-pixels” (or any other fraction). Do you use Windows OS with high resolution screen maybe?

    Best regards,

    Oliver Juhas
    WebMan Design

    #19362

    gtntechsol
    Participant

    Hi Oliver,

    Thank you for your quick response! My browser is set to 100%, but yes you’re correct in that I am using Windows and I do have high res screens. I just tested it on my Mac and I can’t replicate the issue there (though I do briefly see the menu pop open at 879px, it doesn’t get stuck open). Since it seems unlikely many users will have their browsers on 879px using high res screens on a Windows machine, I’ll stop worrying about it.

    Thanks again for your response and information!
    -Jane

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

You must be logged in to reply to this topic.