Menu Issue

Home › Forums › Jevelin Theme › Menu Issue

Home › Forums › Jevelin Theme › Menu Issue

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts

  • dereksieb
    Participant

    Hello,

     

    How do I make the clickable area and hover area around each menu item smaller? It currently extends to the top and bottom of the menu. I will attach a screenshot with what I mean. I know it’s probably a simple solution, but I’ve been trying for hours and cannot seem to figure it out. If you could please provide me with the css style code to fix this it would be so greatly appreciated.

     

    Thanks,

    Derek

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi Derek,

     

    I hope you are well today and thank you for your question.

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #page-container .sh-header:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 30px;
    margin-bottom: 30px;
}

     

    Best regards,
    Shufflehound team

    dereksieb
    Participant

    Thank you very much. That works for the clickable area, but not the hover. The hover area is still the full height of the header. Is there something we can add to the code to fix the hover area too? I would greatly appreciate it. This is one of the last questions I have. You have done an excellent job of helping me get this theme set up!

     

    Thanks,

    Derek

    Shufflehound Support
    Moderator

    Please try changing above custom CSS code as following.

     

    #page-container .sh-header:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 40px;
    margin-bottom: 40px;
    line-height: 20px;
}

    dereksieb
    Participant

    That didn’t work either.. it just made the clickable area even smaller, but didn’t affect the hover area.

    dereksieb
    Participant

    Does it have something to do with the code you gave me previously to stop the header from resizing when scrolling down?

     

    .sh-sticky-header-active .sh-nav > li.menu-item > a {
    padding: 30px 0 !important;
    }

    dereksieb
    Participant

    I actually just figured it out using this code:

     

    #page-container .sh-nav > li.menu-item a {
    padding: 0px 10px !important;
    margin: 0px -10px !important;
    }

    .sh-nav li.menu-item {
    padding: 0px !important;
    margin: 15px !important;
    }

     

    My question.. is that code okay to use?

    Shufflehound Support
    Moderator

    That didn’t work either.. it just made the clickable area even smaller, but didn’t affect the hover area.

    I can see the hover area and clickable area same now on your site for the menus so not sure what you are referring now.

     

    Maybe you are referring hover area to something else and we are not on one line so need bit more description and screenshot.

     

    I actually just figured it out using this code:

     

    #page-container .sh-nav > li.menu-item a {
    padding: 0px 10px !important;
    margin: 0px -10px !important;
    }

    .sh-nav li.menu-item {
    padding: 0px !important;
    margin: 15px !important;
    }

     

    My question.. is that code okay to use?

    Yes, the code seems Ok and if it is working fine for you then you can just use it.

    dereksieb
    Participant

    Great, thank you!

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)