Styling Dropdown Menus

Highlighted
New Member

Hi. I just set up the HS blog for my firm's website. We got everything ironed out except for this one issue-- the dropdown menus on the site navigation aren't expanding horizontally to accomodate longer text strings. For example, if the menu should say "OUR TECHNOLOGY" it only says "OUR TECHN..."

 

You can check it out at here. It's only an issue for one of the menu options, "WHAT WE DO."

 

For a template, we're using the free overture template from the HS marketplace. Thanks!

Reply
0 Upvotes
4 Replies 4
Regular Advisor

You need to make a couple adjustments to your CSS

 

 

Default CSS

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    padding: 10px 20px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Change to

 

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    display: block;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    width: auto;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
    display: inline-block;
    max-width: none;
    overflow: hidden;
    padding: 10px 20px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
New Member

@ndwilliams3, Thank you so much for your prompt reply. Where/how do I make this change?

Regular Advisor

Follow the steps here: https://knowledge.hubspot.com/design-manager-user-guide-v2/how-to-create-edit-and-attach-css-files-t...

 

Paste the css below when you get to step 4.

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    display: block;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    width: auto;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
    display: inline-block;
    max-width: none;
    overflow: hidden;
    padding: 10px 20px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

This will override the default module css.

 

 

Reply
0 Upvotes
Advisor

@Seltzer_Man That's due to these default styles included in modules.css:

 

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    display: block;
    white-space: nowrap;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

A couple options you could implement:

1. override the width and max-width so the dropdown can be expanded like so:

 

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    width: auto;
    max-width: none;
}

2. or you can override the white-space so the text can reflow:

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
    white-space: normal;
} 

 EDIT: @ndwilliams3 man you are fast haha ;-)

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen