Simple Menu length limitations

SOLVE
LoriK
Member | Partner

When adding Simple Menu Items, I'm only allowed a certain amount of characters. How can I edit the length to show the entire item? As a Pillar page, I'd like these to be specific question menu items. 

"What is Digital Signage?"

"Benefits of Digital Signage?"

"Digital Signage Content"

"Digital Signage Hardware"

"How to make a Video Wall"

 

Screen Shot 2018-09-04 at 12.45.38 PM.png

0 Upvotes
1 Accepted solution

Accepted Solutions
Stephanie-OG
Solution
Key Advisor

Thank you! I see the issue. 

 

The menu items are set to have a maximum width of 140px and, if it goes over that width, it hides them with an ellipsis: 

 

HiddenMenuItems.png

 

Increasing the max-width to 220px seems to work, although it stacks them into two rows on a smaller screen. 

 

Because changing the code on the stylesheet might affect other templates, if you're not familiar with CSS the easiest solution is probably to add styling to the head for this particular template.

 

To do so, deselect any modules and, on the right hand side of the template, you should see an "Additional <head> markup" section. In it, add the following: 

 

<style>
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
    max-width: 220px !important;
  }
</style>

This should increase the max-width for menu items on this template.


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

 

View solution in original post

0 Upvotes
5 Replies 5
Stephanie-OG
Key Advisor

Hi there!

 

I think that, while the label box may be small, you should be able to add in a relatively long one if you continue to type: 

 

SimpleMenu1.pngSimpleMenu2.png

 

Try typing in more characters or pasting in the full phrase and let me know if that still doesn't work. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
LoriK
Member | Partner

Thank you.

As you can see, this is how the menu items show up on my template. This is why I asked about the limitation of characters.
 
0 Upvotes
Stephanie-OG
Key Advisor

I'm afraid I can't view that URL without being logged in, but there should be a "Preview" option in the upper right-hand corner and the "Preview Without Display Options" lets you create a public link. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
LoriK
Member | Partner
0 Upvotes
Stephanie-OG
Solution
Key Advisor

Thank you! I see the issue. 

 

The menu items are set to have a maximum width of 140px and, if it goes over that width, it hides them with an ellipsis: 

 

HiddenMenuItems.png

 

Increasing the max-width to 220px seems to work, although it stacks them into two rows on a smaller screen. 

 

Because changing the code on the stylesheet might affect other templates, if you're not familiar with CSS the easiest solution is probably to add styling to the head for this particular template.

 

To do so, deselect any modules and, on the right hand side of the template, you should see an "Additional <head> markup" section. In it, add the following: 

 

<style>
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
    max-width: 220px !important;
  }
</style>

This should increase the max-width for menu items on this template.


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

 

View solution in original post

0 Upvotes