I would like to adjust the spacing of the elements (logo and hamburger menu) in the mobile and tablet settings, but I don't see an option for this in the theme settings. I would like them to match the margins of the text.
Could you please let me know the best way to do these spacing adjustments?
Thanks for this. One more thing I'm not sure about, is why the full-screen overlay isn't showing up as the light backgroudn with black text on small screen sizes as it is on the other sized screens. I've added the custom css to all sizes of screens, please view attached.
Thanks for this, that worked to have the background colour and text colour change on mobile, but the selected page is now white, could you please advise how to make all of the text on the mobile navigation black?
Thanks for this. I added that CSS in to the Custom CSS area, and the words on the mobile menu are still white when you hover on them. Please see screenshot.
It's not a browser cache issue, as I cleared the cache and it's still there. When you have your cursor over the menu item, it is white on hover. Did you try hovering on a menu item?
Mobile phones and tablets do not have hover or mouse over, it is only for larger screens, you are viewing the "phone" over Elementor and from there you can see the hover but if you actually see the site through a real phone or a simulator in your computer you won't notice the hover. Anyway, if you want to change the hover for mobile even though ti will never be visible you can do that by adding the following CSS to Custom CSS:
.mobile-menu-wrapper .mobile-menu-container ul.menu li a:hover {
color: #333 !important;
}
Hello,
I would like to adjust the spacing of the elements (logo and hamburger menu) in the mobile and tablet settings, but I don't see an option for this in the theme settings. I would like them to match the margins of the text.
Could you please let me know the best way to do these spacing adjustments?
Thank you,
Renée
Attached files: Screenshot 2024-04-23 at 9.06.14 AM.png
Screenshot 2024-04-23 at 9.06.25 AM.png
Hi Renee,
You can add the following CSS to Custom CSS > Responsive to Extra Small for mobile devices:
.header-block__row-container.container { padding-left: 40px !important; padding-right: 40px !important; }And you can do the same for the tablet, just paste the same CSS in the respective textarea.
Best regards,
Laborator Team
Thanks for this. One more thing I'm not sure about, is why the full-screen overlay isn't showing up as the light backgroudn with black text on small screen sizes as it is on the other sized screens. I've added the custom css to all sizes of screens, please view attached.
Thanks in advance,
Renée
Attached files: Screenshot 2024-04-24 at 3.07.56 PM.png
Hi there,
I am not sure I understand your question, are you talking about the mobile menu which is showing dark while on desktop it is white?
Best regards,
Laborator Team
Yes exactly. I need it to match the desktop menu.
Thanks,
Renée
Hi Renee,
That's not possible through theme options but you can add the following CSS to Custom CSS:
.mobile-menu-wrapper.mobile-menu-fullscreen+.mobile-menu-overlay { background-color: rgba(255, 255, 255, 0.9); } .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul>li>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu>li>a { color: #333; }Best regards,
Laborator Team
Thanks for this, that worked to have the background colour and text colour change on mobile, but the selected page is now white, could you please advise how to make all of the text on the mobile navigation black?
Attached files: Screenshot 2024-04-26 at 8.38.31 AM.png
Hi again,
Try adding the following CSS to Custom CSS area:
/* Mobile menu: Current menu color */ .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul li.current-menu-ancestor>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul li.current-menu-item>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul li.current_page_ancestor>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container div.menu>ul li.current_page_item>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu li.current-menu-ancestor>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu li.current-menu-item>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu li.current_page_ancestor>a, .mobile-menu-wrapper.mobile-menu-fullscreen .mobile-menu-container ul.menu li.current_page_item>a { color: #333; }Best regards,
Laborator Team
Thanks for this. I added that CSS in to the Custom CSS area, and the words on the mobile menu are still white when you hover on them. Please see screenshot.
Any further help would be greatly appreciated.
Renée
Attached files: Screenshot 2024-04-29 at 12.38.34 PM.png
Hi Renée,
That seems to be a browser cache issue as it is working just fine in my phone:
(view large version)
Please make sure you do some hard refreshes in your browser or add a custom slug to your URL for example:
https://danao3.sg-host.com/?v1
Best regards,
Laborator Team
It's not a browser cache issue, as I cleared the cache and it's still there. When you have your cursor over the menu item, it is white on hover. Did you try hovering on a menu item?
Attached files: Screenshot 2024-04-30 at 9.43.11 AM.png
Hi there,
Mobile phones and tablets do not have hover or mouse over, it is only for larger screens, you are viewing the "phone" over Elementor and from there you can see the hover but if you actually see the site through a real phone or a simulator in your computer you won't notice the hover. Anyway, if you want to change the hover for mobile even though ti will never be visible you can do that by adding the following CSS to Custom CSS:
.mobile-menu-wrapper .mobile-menu-container ul.menu li a:hover { color: #333 !important; }Best regards,
Laborator Team
Ok great, thanks for this explanation and code.
Cheers,
Renée