Okay
  Public Ticket #3665215
Off-Canvas Menu Icon Alignment And Position
Closed

Comments

  •  5
    Tobias started the conversation

    Hi,

    1. I would like to align the Search and Hamburger Icons at the top of the header, but can't figure out the right CSS classes and properties to do so.

    2. Also, when the slide-out off-canvas menu appears, the hamburger icon appears to change its position (actually to almost where I want it). Any idea what might cause this?

    Any help is appreciated. Thanks!

    Attached files:  Bildschirmfoto 2024-06-12 um 07.47.59.png
      Bildschirmfoto 2024-06-12 um 07.50.30.png

  •  2,958
    Andrew replied

    Hi Tobias,

    Thank you for reaching out to us.

    Could you please share your site URL so we can check this out and advise?

    We look forward to your reply.

    Thanks,

  •   Tobias replied privately
  •  2,958
    Andrew replied

    Hi Tobias,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1000px) {
        #header-outer:not([data-format=left-header]) #top nav>ul {
            vertical-align: top!important;
        }
          #header-outer:not([data-format=left-header]) #top nav>ul>li {
            -webkit-align-items: baseline;
            align-items: baseline;
            padding-top: 25px;
          }
    }
    

    Try this and let us know how it goes.

    Thanks

  •  5
    Tobias replied

    Great, that works! Thanks.

    My second issue persists, however: When you hover over the hamburger, it shifts up to the very top of the screen and the off-canvas doesn't close anymore. Testing this in Safari and Chrome.

    Attached files:  Bildschirmfoto 2024-06-12 um 10.30.54.png

  •  2,958
    Andrew replied

    Hi Tobias,

    Thank you for getting back to us.

    Try adding this CSS and let us know if this resolves the issue.

    .slide-out-widget-area-toggle.small {
      display: none;
    }
    

    We look forward to your reply,

    Thanks,

  •  5
    Tobias replied

    Thanks – you're the best!