Navigation Bar is badly Centered

[SwissThomy]

Hi guys,

My navigation bar is making me nervous as it is centered badly. This means that it is centered but it has like an anchor point which is too far right - this way the navigation bar is centered but always like 1/8 of the screen width too far right.

You will find the affected site here: cooleristica.weebly.com

Can you help me with this problem please?

Thanks for your support!

Cheers,

Tom

[Bernadette3]

Hi Tom. Your navigation looks centered on my end. Can you post a screenshot of what you see? Can you also please make sure to include the browser and device you are using? Thanks! 

[SwissThomy]

Here is what I see on Google Chrome on my Laptop (I adjusted the font size of the navigation elements so it looks cleaner although not being nicely centered):

I think the problem even might be the part on the far right of the website where an unnecessary and strange additional empty element has shown up. Look at the line from the navigation menu to see what I mean:

[whitemonkey]

Ciao @SwissThomy 

Sieht tip-top aus auf meinen handy

Und so wie so auf GOOGLE CHROME /PC

Is your browser up to date?

SG..

[SwissThomy]

The problem only seems to appear while at 100% scale on a non-mobile screen. Can you please send me a screenshot of how it looks in your browser on a laptop or desktop pc? Thanks mate.

[whitemonkey]

yup indeed....... it 'over runs' on desk top version

some thing is making the page over run   and it looks like the only thing on home page which is ein bischen  'too long'  is the navigation

i am thinking your navigation bar is too long. u have many categories shown... may be select ,group excess  as MORE

is it a standard nav bar  ? 

[SwissThomy]

Yes, it is a standard nav bar with grouping to 'MORE' activated. It doesn't group as 'MORE' because the current navigation points do not use the whole width they have available.

[whitemonkey]

wow.. whats left? site width ? did u tweak that on html?

es tut mir leid, kann ich ihnen nicht mehr helfen

hope for @Bernadette 

[whitemonkey]

my last idea.... set up up a test website using same them and see how it is. is there any coding u changed?

ps.. what is the theme u r using?

https://www.nomadicbackpacker.com

[Adam7]

In your screenshots it looks like your browser window is small enough that I see some horizontal scrolling. I'm assuming that the theme you are using probably has a minimum width, so instead of behaving like a responsive theme where it will continue to get narrower, it will just scroll. If you make your browser window wider I bet your navigation will look more centered. 

[whitemonkey]

i'm seeing it on a full browser window....... looks as if the header and nav wrap widths are different to that of the main window   though can't make head nor tail of it when INSPECTING the page

[SwissThomy · Accepted solution]

I found the solution thanks to various hints that I've received from you guys, thanks!

The problem was, that the width of the navigation was set too high.

I had to reduce it down from 1366 pixels to 1100 and now everything works again.

#navigation {
padding-bottom: 40px;
width: 1100px;
margin: auto;
text-align: center;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-size: 13px;
overflow: hidden;
white-space: nowrap;

[whitemonkey]

bravo...... es freut mich sehr

viel verknugen

Trevi

https://www.nomadicbackpacker.com

[Adam7]

Nicely done!