Switch to burger menu soon without losing svg logo - Support

Tagged: Burger Menu, svg logo

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

Author

Posts
November 11, 2020 at 4:00 pm #1259906
Ben
Participant
Hello!

How do i switch to burger menu sooner without losing my svg logo, or the logo going into strange positions above and below the main menu?

This is the code I have in the customisation section of WordPress but with the addition of a new page in the main many the logo is going over the navigation text. When I try chaning the px numbers to change the breakpoint it’s moving the logo into all sorts of strange places.
```
@media only screen and (max-width: 767px) {
  .responsive #top .logo {
    width: 168px !important;
  }  
}

@media only screen and (min-width: 790px) {
  .responsive #top .logo {
    max-height: 84px !important;
    height: 84px !important;
    transform: translate(0%,50%) !important;
    width: 168px !important;
  }
}
```
Many thanks in advance,
November 11, 2020 at 11:01 pm #1259988
Victoria
Inactive Moderator
Hey ChichesterDesign,

Please change this code:
```
@media only screen and (min-width: 790px) {
```
to this:
```
@media only screen and (min-width: 768px) {
```
If you need further assistance please let us know.
Best regards,
Victoria
November 12, 2020 at 5:01 pm #1260180

Ben
Participant

Hi Victoria, I made the change you suggested but it didn’t work the logo is still going over the top of the menu and if I change the min-width and max-width values the logo goes to the top of the page.

November 13, 2020 at 11:50 pm #1260401
Victoria
Inactive Moderator
Hi ChichesterDesign,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive .logo img {
      width: 300px;
      margin-top: 20px;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
November 16, 2020 at 6:24 pm #1260761

Ben
Participant

This reply has been marked as private.

November 18, 2020 at 4:57 am #1261198
Rikard
Keymaster
Hi,

Thanks for the update. Please try this CSS as well:
```
@media only screen and (max-width: 1130px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}
```
Best regards,
Rikard
November 18, 2020 at 12:27 pm #1261248

Ben
Participant

This reply has been marked as private.
Author

Posts

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

The topic ‘Switch to burger menu soon without losing svg logo’ is closed to new replies.