Hi Jeanette.

If you have our template (!) - please read & implement CSS corrections >> https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-reduce-space-between-menu-items

I can help after, not before.

In most cases:

1st step: Use that Custom CSS :

#sp-menu {padding: 0;}

2nd step, reduce menu font-size. For example, if you have 19px use 17px (less 2px!)

3rd step: Reduce space between menu items (1px or 2px less), using Custom CSS.

and there will be more space to hold all Menu items in one row. Easy.

Thank you Paul,

I am sorry to say i cant make it work :( I have tried to remove everything i had in the custom.css file, and put stuff in again, but seems i am not able to see why its not working. Do you mind have a look?

It can be server file cache. Sure!

Yes, probably it was server cache or your browser cache - all is OK. Just check site in Incognito Mode.

• Ctrl +Shift + p (Firefox)
• Ctrl + Shift + n (Chrome)

Please mark topic as solved.

Hi again Paul,

I dont look right even in inkognito mode: (https://www.portsystemas.no/images/ney1.jpg)

As you can see the menuline are wrapped into two, the top you can only see half the letters and there is a very big gap before the rest of the menu.

It depends on the screen, on my 23" was/is fully OK.

If you have laptop, indeed extra CSS line may be needed. What resolution and screen size do you have ???

on resolution 1680px and 1440px and 1366px should be OK now, check in Icognito mode. I added extra CSS rules.

I have 1920 x 1080 and it looks good on my screen. But it dont look good on my clients pc', and it dont look good when you make the browser window smaller.

The menus on the webpage are supposed to look good no matter the resolution.

It dont help that it looks good at your screen when its not responsive/wrap better on other users screens.

And for the Kontakt button, even if i remove this it dont help. It still wraps and looks bad.

About Screen 1280px

There must be something off on this whole menu. When you resize a webpage, the menutop are to be responsive.

In this template when you resize down the browser, the menu dont become correct responsive. The way you describe this to me, it seems you have to address every possible browzer size to make to menu look correct.

1055 dont lok ok -

1280 dont look ok - its missing the last menu item called Kontakt which probably are wrapped under the image.

Here are two other examples on me just changing the browser size randomly where the menu looks bad:

I repeat again, this is NOT a template issue, it's a simple grid math. If there is no space for menu items, items collapse. I done even more than I should, it was customization.

If you want to make it OK, also for 1024px (and/or less than 1280px) - you have two options:

1. Enable Mobile Menu faster (described in documenation: https://www.joomshaper.com/documentation/helix-framework/customization-tips#span-class-h3-how-to-show-offcanvas-menu-sooner-span )
2. OR sdd extra @media rule and reduce menu item font-size even more.

As i see it, it is a template issue when the wrapping gives an enormous gap between the wrapped rows, and makes the top part of the menu letters beeing cut so that only half of the letters are displayed.

I understand that there are less space when wrapping the browser, but i dont expect the menuitems to end up like this.

I use WordPress themes and there is the same. Two rows if menu is too long.

If you dediced to remove button from header in that case you have to increase Menu column size. Boostrap grid!

@media screen and (min-width: 999px) {
#sp-menu {width: 75%;}
}

and that line is not needed anymore

#sp-menu { padding: 0; }