Okay
  Public Ticket #3568165
Hamburger menu layout
Closed

Comments

  •  2
    Rainetta started the conversation
    January 23, 2024 at 9:34pm

    Hello!

    I've added the hamburger menu from Kalium as a second menu on my website nettyvanhaarlem.com. It's working out well. I do have three question though that I wasn't able to fix myself. :)

    1. After opening the menu, a little cross appears to close it again. I would like to make it a little bit bigger and change the color, so it matches the color of the links next to it. I tried everything in css, but even though I thought I found the name of the element, I wasn't able to change it yet. Please help me out. Using code is not a problem.

    2. The hamburger used to open the menu is placed in a nice spot in the corner of my website. However, when opening and closing the hamburger menu, the hamburger 'jumps' up and down (it moves a little). I tried to keep it fixed, but didn't manage yet. What can I do?

    3. The menu is much to my liking, but I would even like it better if opening it wouldn't affect the rest of my website layout in any way. Right now, the website is moving a little bit to the left when opening the menu. It doesn't have to, it's no problem if the menu covers the website partly. I tried changing the z-index to put it on a different layer, but that didn't help yet. :)

    Thanks a lot in advance for your help!!

    Cheers, Netty

  •  1,558
    Laborator replied
    January 24, 2024 at 8:31am

    Hi Netty,

    1. Add the following CSS to Custom CSS:

    .sidebar-menu-wrapper .sidebar-menu-container .sidebar-menu-close {
    float: right;
    background: none;
    width: auto;
    height: auto;
    background-size: auto;
    margin-bottom: auto;
    top: auto;
    position: relative;
}
a.sidebar-menu-close:before {
    content: '';
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZmFmYSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMDUuNjYsMTk0LjM0YTgsOCwwLDAsMS0xMS4zMiwxMS4zMkwxMjgsMTM5LjMxLDYxLjY2LDIwNS42NmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTE2LjY5LDEyOCw1MC4zNCw2MS42NkE4LDgsMCwwLDEsNjEuNjYsNTAuMzRMMTI4LDExNi42OWw2Ni4zNC02Ni4zNWE4LDgsMCwwLDEsMTEuMzIsMTEuMzJMMTM5LjMxLDEyOFoiPjwvcGF0aD48L3N2Zz4=');
    width: 48px;
    height: 48px;
    background-size: cover;
    display: block;
}

    2. This issue sometimes is happening and sometimes is not, can you please add the CSS which I provided first and then if this still happens please come back to us.

    3. Add the CSS below to Custom CSS area to stop the animation of the wrapper:

    .sidebar-is-opened>.wrapper {
    transform: none !important;
}


    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  2
    Rainetta replied
    January 24, 2024 at 8:39am

    Thank you so much, Art!

    After adding the code you sent me for question 1 and 3, indeed, question 2 was fixed as well. :-) Yay!

  •  1,558
    Laborator replied
    January 24, 2024 at 8:41am

    Happy to hear that, have a great daysmile.png

    P.S: If you like our theme, it would help us a lot if you could give us a five-star rating on ThemeForest from your Downloads tab.

    A huge thank you from Laborator in advance!


    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group