Header navigation inline not fully visible under medium screen size

Support
#1

Hello,

I have a problem with my header navigation inline under sreen size 768px-979px, right side of my header is not fully visible on this screen size. I have tried hiding navigation inline during breakpoint 768px-979px and display collapsed navigation instead with screen size buttons but with no success, for whatever reason breakpoint 768px-979px button does not work in all of my pages.

I would like to either hide navigation inline on 768px-979px and show collapsed navigation instead or somehow fit not collapsed navigation with social buttons and cart button on 768px-979px screen size, so that it is fully visible.

website: https://www.mhealth.lt/moderni-sveikata/

Lukas

#2

Hi Lukas

Upon checking your site seems like you solved the issue.

Let us know if you need further assistance.

Cheers

#3

Hello Joao,

Did not solve the issue.
Still need help.

Lukas

#4

Hi There,

Your navbar turns from inline to mobile at 969px that means you have selected to have the mobile navbar on Mobile, Portrait Tablet, and Landscape tablet standard widths.

If you want it to be triggered even before you can choose to break on laptop width, but from my point of view it is not necessary at all, please check your site in a small laptop and iPad and you will see it works fine.

Hope it helps

#5

Hello,

Yes wide navbar is selected to turn mobile at 969px and smaller screens. However, some smaller devices seem to escape this rule and show wide navbar, which becomes hidden on right side of the page. I attach iPad mini 4 landscape view.

#6

Hi There,

Please try to use media queries specific to devices. See this: http://stephen.io/mediaqueries/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Add ID on those menu element then hide using CSS.

Hope this helps.