-
Posts
-
Hello,
1. Somehow my mobile logo seems stuck at the middle on my cell phone. I am already working on CSS, but I cannot fix it yet. How can I fix the logo on mobile more to the left?
/* Change logo and menu position in tablets and mobile */
@media only screen and (max-width: 990px) {
.responsive #top .logo {
float: left;
}
#advanced_menu_toggle, #advanced_menu_hide {
right: auto;
left: 0;
}}2. On IPad portrait 1024 x 768 both the menu and the hamburger menu are visible. How do I set only the hamburger menu? I already chose for: Menu items for mobile – Setup for smartphones and tablets (browserwidth till 990px)
Thanks in advance,
Greetings,
Arjan van der Velde
Hey Arjan,
1- Are you having the issue on Chrome or Safari? Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
@media only screen and (max-width: 767px) { .responsive .logo img { -webkit-max-logical-width: 40%; }}2- Please add following code to Quick CSS as well
@media only screen and (max-width: 990px) { .html_header_sidebar #header .av-main-nav>li.menu-item { display: none; }}Best regards,
YigitHello,
Thanks. My logo is on my cell phone more to the left now. That’s nice and OK :)
Menu Items for mobile in Main menu Enfold is set for phones and tablets browser width till 990px.
I am on Chrome when I test the different resolution sizes (with Screen Resolution Tester). On the following sizes it is not OK and yes I have cleared my cache. This is where I do see both the Hamburger menu item and the menu as text:
1024 x 768
768 X 1024
1366 x 768
1280 x 800
1280 x 1024
1024 x 600
1280 x 720
1360 x 768
800 x 600Hi,
I checked your site on chrome, at 1380px the mobile menu is activated. Can you please be specific what exactly you are trying to do and remove the code you have added to the site so we can provide you with a fresh snippet.
Best regards,
VinayMaybe it’s better to activate the mobile menu earlier? As I see it, I see too often the hamburger menu. At mentioned screen sizes, everywhere the mobile menu AND the normal menu are visible. That’s not user friendly. Both menu’s at all those screen sizes. I have removed the earlier aboven given code.
Thanks in advance,
ArjanHi,
Please add the below code to your site in Enfold > General Styling > Quick CSS and clear the cache to view the changes.
/* Hide burger icon in desktop */ @media only screen and (min-width: 767px) { #top #header .av-burger-menu-main.menu-item-avia-special { display:none !important; } } /* Logo width in mobile */ @media only screen and (max-width: 767px) { .responsive #top .logo { width: auto !important; min-width: 120px; }}Best regards,
Vinay
- You must be logged in to reply to this topic.