Support » Theme: Storefront » Navigation bar snippet broke (too wide)

Viewing 11 replies - 1 through 11 (of 11 total)
  • 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!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Navigation bar snippet broke (too wide)’ is closed to new replies.