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

Comments

  •  6
    Tobias started the conversation
    June 12, 2024 at 6:03am

    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

  •  3,001
    Andrew replied
    June 12, 2024 at 6:49am

    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
  •  3,001
    Andrew replied
    June 12, 2024 at 8:12am

    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

  •  6
    Tobias replied
    June 12, 2024 at 8:31am

    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

  •  3,001
    Andrew replied
    June 12, 2024 at 8:41am

    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,

  •  6
    Tobias replied
    June 12, 2024 at 9:21am

    Thanks – you're the best!