I've noticed an issue with my Soledad theme since the most recent update. As you can see in the attached screenshot, the top bar showing all the drop-downs is not appearing on some desktop browsers (i.e Chrome). When I change the Zoom view to 80%, I can see it though (see second attachment). Is there a way to fit this to all laptop screens, so the user does not have to change the Zoom to see that top bar? Thank you!
Thank you. This partially resolves the issue, however, now when I'm on 100% zoom, the top bar is stuffed into the corner. How can I better fit this to the screen size, that way, users will see better laid out across the width of the screen?
Please note that the CSS code I provided only applies to desktop screens below 1170px. You should verify it using a third-party service: https://www.browserstack.com/responsive
I’ve just checked your site again, and everything is displaying correctly. The code only adjusts the spacing and font size for smaller screens.
Hi, I just tried the 3rd party tool you mentioned and I noticed that the iPad Pro (1366x1024 - landscape) appears to still have this issue (see attached screenshot). Also, is there a reason you chose 1170px as the screen size? Aren't there some laptops that are a bit smaller than that? Thanks for all your help.
You can address the issue for the 1366 screen by add the following CSS code:
@media only screen and (min-width: 1170px) and (max-width: 1400px) {
#navigation.menu-item-padding .menu > ul > li > a,
#navigation.menu-item-padding ul.menu > li > a {
padding: 0 5px;
}
}
Hi there,
I've noticed an issue with my Soledad theme since the most recent update. As you can see in the attached screenshot, the top bar showing all the drop-downs is not appearing on some desktop browsers (i.e Chrome). When I change the Zoom view to 80%, I can see it though (see second attachment). Is there a way to fit this to all laptop screens, so the user does not have to change the Zoom to see that top bar? Thank you!
Attached files: IMG_4821.JPG
Screenshot 2024-12-29 at 5.56.22 PM.png
Hi,
The issue is that you’ve added too many menu items with a large font size, causing it not to fit properly on small desktop screens.
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
@media only screen and (max-width: 1170px) { #navigation.menu-item-padding .menu > ul > li > a, #navigation.menu-item-padding ul.menu > li > a { padding: 0 5px; } .penci-menuhbg-wapper, #navigation.header-6 .menu { margin-right: 10px; } #navigation.header-6 .pcheader-icon { margin-left: 10px; } #navigation ul.menu > li > a { font-size: 13px; } }Regards,
PenciDesign.
Thank you. This partially resolves the issue, however, now when I'm on 100% zoom, the top bar is stuffed into the corner. How can I better fit this to the screen size, that way, users will see better laid out across the width of the screen?
Attached files: Screenshot 2024-12-30 at 2.29.36 PM.png
Hi,
Please note that the CSS code I provided only applies to desktop screens below 1170px. You should verify it using a third-party service: https://www.browserstack.com/responsive
I’ve just checked your site again, and everything is displaying correctly. The code only adjusts the spacing and font size for smaller screens.
Regards,
PenciDesign.
Hi, I just tried the 3rd party tool you mentioned and I noticed that the iPad Pro (1366x1024 - landscape) appears to still have this issue (see attached screenshot). Also, is there a reason you chose 1170px as the screen size? Aren't there some laptops that are a bit smaller than that? Thanks for all your help.
Attached files: Screenshot 2024-12-30 at 10.04.43 PM.png
Hi,
You can address the issue for the 1366 screen by add the following CSS code:
@media only screen and (min-width: 1170px) and (max-width: 1400px) { #navigation.menu-item-padding .menu > ul > li > a, #navigation.menu-item-padding ul.menu > li > a { padding: 0 5px; } }Regards,
PenciDesign.
Thank you. Should I be deleting the other CSS code you previously gave me? Or Does this work in addition?
Hi,
No, please retain the existing CSS code.
Regards,
PenciDesign.