Help with menu item

Support
#1

Hi - I added a new menu item “Run with Team Hope Story” but when I’m viewing on a browser it goes onto the next line. Is there you could help me make this look better? Thanks! https://hopestory.org

#2

Hello @rick4him,

Thanks for writing to us.

I checked your site, and it seems that the menu is working fine on my end. Please clear your browser cache and recheck it. I have tested it on the Google Chrome browser version 139.0.7258.66.

Thanks

#3

It’s working, but because there are so many menu items it creates a second row on desktop / laptop.

#4

Hi Rick,

In this case, I’d recommend using the Navigation Collapsed , Navigation Dropdown , or Navigation Modal elements. These components will help you add a hamburger menu that works across all screen sizes.

However, to use these features, you will need to customize your Header using the Header Builder , which is available exclusively in the Pro theme—not in X , which you are currently using.

I suggest downloading the Pro from your Themeco Account and following the instructions to upgrade your theme on how to change the theme after upgrading to Pro.

Once you have upgraded, the following article will guide you through using the Header Builder and setting up your navigation:

https://theme.co/docs/header-builder-overview

Thanks

#5

Thanks. What about just adjusting the size of the text?

#6

Hello Rick,

Making the font size smaller would still give you the same results especially those on smaller or medium screen sizes. Since this is using the X theme, you will have to find a way to group the menu items and put other items as a sub menu item to make the navigation items shorter. For example, Home, Who We Are, What We Do and Contact or other similar grouping of items.

Hope this makes sense.

#7

Thanks, I am using a sub-menu now, but I’m looking for a way to draw attention to the those main areas up top.

#8

Hello Rick,

Yes, to display all your navigation items in the header without breaking the layout, you’ll need to use some of the menu items as submenus. Currently, the header width is set to 100%, but the actual usable space depends on the device’s viewport. For example, on a laptop with a viewport width of around 1400px, after accounting for the gutter space on the left and right, and the logo area, the navigation menu space is approximately 1050px. With your current font size and spacing, this allows about 8–9 main menu items. If you want to add more items, you could reduce the font size and spacing, but the best approach is to move some items into submenus. This will keep the header layout clean, and this way we avoid overcrowding while keeping navigation easy to use and preventing it from breaking on different screen sizes.

Hope it helps
Thanks