Navigation menu two line on mobile phones

[london-G]

Hello guys,

I am not going to post the code here as I don't really know where in the code files I can fix that.
I have a website that basically looks good on desktop and laptops however when it comes to mobiles and tablets the top navigation bar seems to be spaced out which results the bar being in two lines.

I believe that's due because of the size of the device and there is something somewhere in the css that I have not set properly. Could I be right?

Do you have an idea of what this might be?

Thanks as usual!

[JorgeM]

Its hard to say without seeing your HTML and styles. It could be related to using fixed lengths on certain elements. For example, in a nav menu say you have 10 items and you have a fixed width for each item at 100px. That would require at least 1000px to be visible on one line. If these nav items are within an element that only has 900px available, it may wrap to the next line.

[london-G]

hmm I don't think that's the case.
I guess I can give you the link:

[JorgeM]

I'm not 100% sure because i have no dev tools on my mobile browser, but from the desktop i see that you have a width associated with the div that has the classes assigned: <div class="wrapper clearfix">. I see it has a width of 94%. I can reproduce the issue you see on the mobile device when i change the width of this div to something much less than 94%.

[london-G]

Thank you for spotting that out. I have changed it to 100% now, will check later if the menu is aligned fine

[london-G]

Nope, still not fixed. It's quite difficult as I can't really see the problem in the code with a mobile!

Will try something else.