-
-
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.
-
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!
-
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!
-
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!
-
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?
-
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 4 years, 3 months ago by rebeccaolson.
-
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!
-
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.)
-
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! -
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!
-
-
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
-
-
You must be logged in to reply to this topic.