Hamburger Menu Position and Colour - Support | Kriesi.at

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

Author

Posts
August 28, 2018 at 3:39 am #1002505

finblue
Participant

Hello!

How do I add a background coloured square behind the hamburger menu on both desktop and mobile? I’ve tried CSS, but all it does it change the colour of the hamburger lines. Also, I would like to move the hamburger menu permanently to the top right corner of my browser window both on desktop and mobile. Can this be achieved? I have provided links for reference in the content area below.

Thank you!!

August 28, 2018 at 5:26 am #1002531
Mike
Moderator
Hey finblue,
To create a background color for the burger menu, we will use two colors to create a box. One is your current background color so it will not be seen, and the other is the color for the box. Here is my example, please adjust the colors to suit your site.
Also note that I changed the padding of the element to adjust the left & right width of the box.
```
.av-burger-menu-main {
  padding-left: 8px !important; 
  padding-right: 8px !important;
  background: 
      linear-gradient(
      to top,  
      #282B2E,
      #282B2E 25%,
      #ff0000 25%,
      #ff0000 75%,
      #282B2E 75%);
}
```
Please post a link to your site so we can assist in moving the mobile menu to the top right corner of your site.

Best regards,
Mike
August 28, 2018 at 4:10 pm #1002742

finblue
Participant

Thank you for your response.

Okay, I made the adjustments, and it’s looking great…but when I click on the menu I see a border around it. And in mobile view, the square looks strange and you can see the background colour when it overlaps the open menu. I now have to make many more adjustments. Can we address them?

My website is in maintenance mode, so you have to log in and take a look for the padding.

August 29, 2018 at 1:47 am #1002929

finblue
Participant

This reply has been marked as private.

August 29, 2018 at 1:52 am #1002930

Mike
Moderator

Hi,
I tried logging in, but I received an error that a Authentication Code has been to an email address.
Please disable this security check, so we can login to your site.

Best regards,
Mike

August 29, 2018 at 1:53 am #1002931

finblue
Participant

This reply has been marked as private.

August 29, 2018 at 1:56 am #1002932

finblue
Participant

This reply has been marked as private.

August 30, 2018 at 4:12 am #1003332
Mike
Moderator
Hi,
Thank you for the login, I believe it would be better to use a image as a burger menu item so there won’t be these issues.
Please try this example code in the General Styling > Quick CSS field:
```
.av-hamburger::before {
    content: url(https://s6.postimg.cc/hw8mmus4h/icons8-menu-filled-50.png);
    display: block;
    padding-top: 5px;
}
.av-hamburger-inner {display:none!important;}
```
If you like this icon you can save it to your site and change the url above to point to it, otherwise you could find a new icon to use instead. I found this icon at: https://icons8.com/icon/set/menu/all

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.