CMS Development

Seltzer_Man
メンバー

Styling Dropdown Menus

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!

0 いいね!
4件の返信
stefen
キーアドバイザー | Solutions Partner
キーアドバイザー | Solutions Partner

Styling Dropdown Menus

@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, Community Champion, Kelp Web Developer
ndwilliams3
キーアドバイザー

Styling Dropdown Menus

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;
}
 
Seltzer_Man
メンバー

Styling Dropdown Menus

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

ndwilliams3
キーアドバイザー

Styling Dropdown Menus

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.

 

 

0 いいね!