Set Mobile logo to the left - Support | Kriesi.at

Tagged: Hamburger-Menu, mobile logo

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 5, 2018 at 12:53 pm #1018265

ArjanDenHaag
Participant

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

October 9, 2018 at 1:37 pm #1019490
Yigit
Keymaster
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,
Yigit
October 10, 2018 at 1:06 am #1019698

ArjanDenHaag
Participant

Hello,

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 600

https://snag.gy/jgfFSi.jpg

October 14, 2018 at 10:27 am #1021173

Vinay
Inactive Moderator

Hi,

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,
Vinay

October 18, 2018 at 11:58 pm #1023703

ArjanDenHaag
Participant

Maybe 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,
Arjan

October 20, 2018 at 2:10 am #1024253
Vinay
Inactive Moderator
Hi,

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
October 20, 2018 at 5:27 pm #1024367
ArjanDenHaag
Participant
Hello,

That works :) Thanks. Much better and more user friendly. :) You may close this ticket.

Till next time.

Greetings,

Arjan
- This reply was modified 6 years, 2 months ago by ArjanDenHaag.
October 22, 2018 at 4:09 pm #1024940

Victoria
Inactive Moderator

Hi ArjanDenHaag,

Glad we could help :)

If you need further assistance please let us know.
Best regards,
Victoria
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.