Close Icon Customization

  • Resolved sintyart

    (@sintyart)


    4 years, 9 months ago

    Hello!
    I would like to modify Close Icon on the Hamburger menu: the same size and padding as hamburger menu. Now when I click on the menu, after the menu page loads the Close Icon is smaller and closer the the right top corner of the browser than hamburger menu. How can I modify that in Aditional CSS in Astra theme?
    Thank you very much!
    Sinty

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @sintyart

    As we checked on my end, I have noticed that the Close Icon is working perfectly. It just pops up a little bit for the scroll bar on the website.

    If you take a closer look then you will be able to see the general page has a scroll bar on the right side and the POP-up menu doesn’t have it! So, for this reason, it slightly takes the space on the scroll bar right side.

    However, if you want to change the icon position then you can simply paste the below code into the Customize > Additional CSS or into the child them style.css file.

    .ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar-navigation .close:after {
    font-size: 3rem;
    margin-right: 58px;
    margin-top: 46px;
}

    I hope that helps.

    Regards
    Riad

    Thread Starter sintyart

    (@sintyart)

    Thank you very much!
    It helped!!!

    Regards
    Sinty

    Perfect, @sintyart!
    ?
    Glad to help you out. ??
    ?
    Do let us know if there’s anything else we can help you with. And do mark the topic as resolved.

    Have a great day and week ahead. Stay safe! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Close Icon Customization’ is closed to new replies.