Responsive header menu not spacing correctly

- 5 years, 11 months ago rebeccaolson
  Participant
  
  Expired
  
  The header (menu) is not showing correctly on all responsive devices.
  
  I have my menu set to logo in the center and menu on the left and right. On a small tablet turned sideways/landscape (the attached screenshot is from a Kindle) the left side of the menu and logo are showing at the top, but the right side, search and mini-cart are showing beneath it (on top of the slideshow) rather than up in the header. Basically, the menu text is not responding to the smaller screen by adjusting the spacing in order to fit within the header area.
  
  Please note that for smarthphones or small tablets upright/portrait the menu defaults to a hamburger and the logo only. The menu is showing correctly on PC.
- 5 years, 11 months ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom Css box:
  
  @media (max-width: 1100px) and (min-width: 970px){ .header_11 #logo { margin: 0 5px !important; } nav .menu > li { margin-right: 5px !important; margin-left: 5px !important; } nav .menu>li>a { font-size: 12px !important; } }
  
  Best regards!
- 5 years, 5 months ago rebeccaolson
  Participant
  
  Expired
  
  Mirela –
  
  This has started happening again, with the most recent update. I’ve double checked, and the code you gave me (above) that worked before is still in my CSS and hasn’t been modified. Is there something that needs to be adjusted in that code so that it continues to work?
  
  I’m seeing the issue on a Microsoft Surface Pro 7 (in landscape mode)
  
  Thanks!
- 5 years, 5 months ago Ruco
  Keymaster
  
  Hello,
  
  You have to take the older js/codeless-main.js file of theme and replace to the new one you have just updated.
  
  In the old version of the site i think we have changed something there.
  
  Let us know.
  
  Regards!
- 5 years, 5 months ago rebeccaolson
  Participant
  
  Expired
  
  Hey there – sorry, I’m a little confused about your instructions. I need to take an older .js file and replace the new one with the older one? Where do I get the old .js file? Or are you saying that the .js file you looked at is old, and needs to be updated?
  
  I see that you accessed the staging version of our website. Since I didn’t realize you were going to look at the code itself, I didn’t think to update it. I have updated the staging site now so everything is current as of today. Does this change anything?
- 5 years, 5 months ago rebeccaolson
  Participant
  
  Expired
  Also – I just spent some more time on this, and it appears that the issue is only occurring in Chrome and Edge browsers. Firefox and Opera do not have any issues (the mini-cart and search bar are located in the correct spot). When comparing Firefox to Chrome, I see that for Firefox the font on the navigation menu is smaller (which may be allowing more space in the header for the cart/search bar to fit.) So it seems there may be an issue with the menu font not adjusting for smaller screens?
  
  This reply was modified 5 years, 5 months ago by rebeccaolson.
- 5 years, 5 months ago Ruco
  Keymaster
  Hello,
  
  Please try to add this line of CSS:
  
  @media (max-width: 1100px) and (min-width: 970px){ nav .menu>li>a { font-size: 10px !important; } }
  
  If you can’t do it by yourself please send us your wp creds again so I can customize it again for you.
  
  Regards!
- 5 years, 5 months ago rebeccaolson
  Participant
  
  Expired
  
  Hi there – I added the CSS code, but it didn’t help. The login credentials are the same (I haven’t added the CSS code to the staging site, but it’s otherwise updated.)
- 5 years, 5 months ago Mirela
  Participant
  
  Hello,
  
  Can you send me a screenshot of this? I checked the header and the very smallest screen size before turning into a mobile version header, is the 980px. And it does not look bad: https://ibb.co/zfkwpkw
  
  Let me know.
  Best regards!
- 5 years, 5 months ago Ruco
  Keymaster
  Hello,
  
  I can’t emulate the exact Surface but with browser resolution set please check it out: https://imgur.com/VDbDqIt
  
  I have changed the max-width to 1361 in the Tower> General > Custom Css Box
  
  @media (max-width: 1361px) and (min-width: 970px){ nav .menu>li>a { font-size: 12px !important; } }
  
  Please let me know if this customization has resolved your issue. The change is made in the staging site
  
  Regards!
- 5 years, 3 months ago rebeccaolson
  Participant
  
  Expired
  
  That worked – thank you!
- 5 years, 3 months ago rebeccaolson
  Participant
  
  Expired
  
  Please see a new related issue that has popped up – I opened a new ticket: https://support.codeless.co/?topic=margins-off-header-search-for-some-browsers
- 5 years, 3 months ago Ruco
  Keymaster
  
  This reply has been marked as private.

Viewing 12 reply threads

You must be logged in to reply to this topic.

Community Forums

Responsive header menu not spacing correctly

Site Links

Useful Articles

Login