Navigation bar snippet broke (too wide)

Hi Vlapuen,

Your website looks fine. Did you find a solution?

– Maria Antonietta

hey Maria, I didn’t find a solution, the problem is still there, look at the bottom scrollbar

This is a screenshot

Now I can see where the problem is, it wasn’t clear to me at first sight.

It looks like the issue is caused by the margin and padding values of the .jk-primary-navigation element. In particular:

`margin-left: -9999px;
margin-right: -9999px;
padding-left: 9999px;
padding-right: 9999px;`

As soon as you get rid of these, the scrollbar disappears.

Thanks for taking the time Maria but I already tried that, and it does not look very good:

I just wanted the same effect as seen in but I get the same problem all the time even after disabling everything (plugins, themes, etc.)

sorry, I meant I want the same effect as https://docs.woothemes.com/document/create-a-navigation-bar/

You might be able to solve the issue by applying this rule to one of the top containers or the body element itself:

overflow-x: hidden;

Let us know if it works.

oh, I see!
I just tried the overflow-x: hidden in the site-header class but it doesn’t fully fix it (now it shows vertical scrollbars in the header). I will play with other options… maybe adding a container to “jk-primary-navigation” solves it.

I will update when done

I’ve just tested it. You need to add:

body {
  overflow-x: hidden;
}

Simply get rid of the above rule on the site header and put it in the body element instead and you should be good to go.

I hope this solves it ??

Thank you very much Maria, it’s now fixed thanks to you.

For the record this is how the style.css looks now:

@media screen and (min-width: 768px) {
body {overflow-x: hidden;/* fix for horizontal scrollbar */}
}

This topic is now resolved

That’s great news!