Can dropdowns be set to “fit” width of content?

  • Resolved Tracy

    (@tracycoach)


    7 years, 5 months ago

    Hi there! Delighted to see Ascend officially in the repository, I love it! Considering switching my other sites over too – and if not, to another Kadence theme. Love your support.

    2 quick q’s:

    1. Can I add CSS to fit the column width to the content?

    I’ve got 3 dropdown menus on my site, with two-word sub items, two words separated by ” + ” and one word, respectively (see here). The fixed-width dropdown columns force the second dropdown to wrap across additional lines, and create a good bit of dead space on the third.

    2. Can I add CSS to make the menu items bold on hover, rather than change their colour?

    I’ve got white text on a teal background, and currently have Dropdown Font Hover and Active Color set to black – but don’t think this is high contrast enough. I’d like to keep the teal so am thinking bold white – or a slightly larger font size – would be better for the hover.

    Thanks in advance!
    Tracy

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Tracy

    (@tracycoach)

    PS I’ve 4 dropdowns now – the ‘articles’ menu item shows the too-long/wrapping sub-items; the ‘media’ and ‘more’ menu show have the too-short/dead space sub-items.

    Hey Tracy,

    It’s great that you’re happy with our themes and support! ??

    1. Can you please share some screenshots? Not sure that I’m looking at the right dropdown.

    2. Here is some CSS to target the hover state of the menu items:

    ul.sub-menu.sf-dropdown-menu li a:hover {
    font-weight: 900 !important;
}

    Hopefully this is helpful!

    -Kevin

    Thread Starter Tracy

    (@tracycoach)

    Hi Kevin!

    1. Here are the screen shots: https://imgur.com/a/q6NQn

    You can see the first one’s spot on, the second and fourth have dead space (being one-word items) and the third is wrapping. I’d like each dropdown to fit to the widest menu item it contains, if such a thing is possible!

    2. That works a treat, thanks! At 900 it made the longest item (‘Executive coaching’) wrap onto a new line, but I dropped it to 700 and that fits.

    Thanks as always!
    Tracy

    Hey,
    There isn’t any way to automate it but you can use this CSS:

    
.nav-main .sf-menu .menu-item-37 ul {
    min-width: 260px;
}
.nav-main .sf-menu .menu-item-754 ul {
    min-width: 120px;
}
.nav-main .sf-menu .menu-item-764 ul {
    min-width: 100px;
}

    Ben

    Thread Starter Tracy

    (@tracycoach)

    Brilliant, thanks Ben!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can dropdowns be set to “fit” width of content?’ is closed to new replies.