Center Logo and Burger Menu on Mobile Devices - Support | Kriesi.at

Tagged: Burger Menu, center, header, logo, mobile

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

Author

Posts
October 9, 2017 at 11:22 pm #862172

Hoernchen089
Participant

Hi,
I already tried heaps of CSS Code and different ways to get the Header Logo and the Bruger Menu centered. The Logo should be above the Burger Menu and centered. Beneath that the Mobile Logo should be placed in the center.
I had a quite good css solution but noticed that the Tag in the Burger Menu changes its height based on the window via Javascript.
Therefore it appeared glitchy sometimes and would lay over the content and not work for all devices.

I would appreciate any help to get this both centered and mobile responsive

Thanks

October 11, 2017 at 5:40 am #862727
Nikko
Inactive Moderator
Hey Hoernchen089,

Try adding this css code in Quick CSS (located in Enfold > General Styling):
```
@media only screen and (max-width:767px) {
  .responsive #top .logo, 
  .responsive #top .logo a {
    display: block;
    margin: 0 auto;
  }


  .responsive #top .logo img {
    margin: 0 auto;
  }

  .responsive #top #wrap_all .main_menu {
    position: static;
    height: auto;
  }

  .responsive #top .av-logo-container .avia-menu {
    width: 100%;
    text-align: center;
  }

  .responsive #top .av-logo-container #avia-menu {
    margin: 0 auto;
    width: 29px;
  }

  #top #wrap_all #header .av-small-burger-icon a {
    height: auto !important;
    line-height: 3 !important;
  }
}
```
Hope this helps :)

Best regards,
Nikko
October 11, 2017 at 1:45 pm #862866

Hoernchen089
Participant

Thanks it helps, but I changed the height of the header to 150px and the logo is cut off now. I guess it’s the max-height setting from a and img but I cant change it because it is generated with Javascript, isnt it?
Any ideas on that?

October 11, 2017 at 2:31 pm #862898
Nikko
Inactive Moderator
Hi,

You can change it, you can override inline css generated by javascript, for example javascript sets height to 150px you can just add !important to override that value for example:
```
.responsive #top .logo {
    height: 100px !important;
}
```
Best regards,
Nikko
October 12, 2017 at 12:12 pm #863362

Hoernchen089
Participant

Weird, I thought I tried that and it didnt work. Apparently it’s all good now.
Thanks for the help.
I appreciate it.

October 13, 2017 at 8:20 am #863776

Nikko
Inactive Moderator

Hi,

Glad that it worked. Thanks for using Enfold :)

Best regards,
Nikko
Author

Posts

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

The topic ‘Center Logo and Burger Menu on Mobile Devices’ is closed to new replies.