Dropdown Configuration

  • Resolved epicjono

    (@epicjono)


    3 years, 8 months ago

    Hello! Quick question about dropdown lists in the header (specifically the “Categories” option). I would like to put a 2px border around the dropdown, and also highlight the different options a certain color. I’ve done both of those things with the below code, but I know there’s a better way.

    The border is only appearing on hover, which means when I click the dropdown it fades in with a hover animation. I would like it to be there as soon as the dropdown is clicked, so that there is no fade-in animation.

    Also, there seems to be a margin on the top, left, and bottom of the dropdown box, so that the hover isn’t selecting the entire area. I would like for those margins to be removed (if possible) so that there’s no white space on the edges when hovering over a list option. I’d also like to remove the padding in between those list options as well.

    Here is the code. I tried li:hover instead of a:hover, but that didn’t work:

    .menu-container ul.sub-menu
{border-style: solid;
border-width: 2px}
.menu-container ul.sub-menu a:hover
{background-color: var(--p-body)}

    Thank you!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi there,

    This code should work well to keep the border and fix the margins around the menu items. Please remove the code you shared here from the site, and replace it with the following:

    @media all and (min-width: 56.25em) {

  .menu-primary .sub-menu {
    border: solid 2px #fff;
  }
  .menu-primary .sub-menu li {
    margin: 0 !important;
  }
  .menu-primary .sub-menu a {
    margin: 0;
    padding: 6px;
  }
}
    Thread Starter epicjono

    (@epicjono)

    Thanks Ben, it all worked out. I do notice one thing now – with no border, the hover color extends all the way to the end of the sub menu container. But when I add the border in, there’s a very small amount of space between the end of the hover color and the border, probably a pixel.

    This is the code for the hover color:

    .menu-primary ul.sub-menu a:hover
{background-color: var(--p-body)}

    This code is with the space between the purple and the border. This is how the website is currently. I made the background red to be able to see the difference.

    .menu-primary .sub-menu {
    border: solid 2px #000;
    background-color: red;
  }

    If I comment out the border line from the above code, then everything looks normal and the purple extends all the way to the edge of the container. Is there anything I can do to make that purple color extend all the way to the border, without any extra space?

    Hopefully this question made sense.

    • This reply was modified 3 years, 8 months ago by epicjono.
    Thread Starter epicjono

    (@epicjono)

    I accidentally marked it as resolved.

    Theme Author Ben Sibley

    (@bensibley)

    Did you find a solution already for this? I just checked it out and I see the purple extending all the way to the border now: https://share.getcloudapp.com/nOuPZBPn

    Thread Starter epicjono

    (@epicjono)

    I did not, I’ll peg it as a monitor issue. It’s insignificant anyway. Thanks again for the help!

    Theme Author Ben Sibley

    (@bensibley)

    Okay no problem ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dropdown Configuration’ is closed to new replies.