Grow your CSS skills. Land your dream job.

Awkward effect on the navbar while scrolling

  • Tx3
    # January 28, 2013 at 2:09 pm

    This problem is giving me an headache. I have website that is using Twitter Bootstrap’s classes navbar and .navbar-fixed-top. The idea is that navigation is fixed to the top and content scrolls under it. Background of the navigation is same as background of the site (subtle gray pattern).

    The problem is that when you scroll little bit the pattern disappears partialy and tiny borders appear to the sides. This happens at least with Chrome and IE9.

    [example](http://priimavalmennus.fi/ “Priima-valmennus website”)

    Any ideas how to fix that?

    Thanks,
    -Tx3

    # January 28, 2013 at 2:34 pm

    The borders that you’re seeing aren’t borders at all, they are the shadows from the other elements on the page.

    If you don’t want to see those, make sure you set the header to have a width of 100%.

    # January 28, 2013 at 2:57 pm

    I believe the nav already is full width. I’d add the same background as body to nav.main

    # January 29, 2013 at 4:16 am

    there are two things i see. the first is that the nav has multiple backgrounds, the nav itself has a background and then the ul has the same background. the other thing is hard to tell but if you remove the flexslider the flickering of the nav is no longer an issue. so i think that the flexslider is the problem. as said before, the lines on the side is element-shadows.

    # January 29, 2013 at 8:16 am

    the nav doesn’t have a background – the backgrounds are on the first child div and the ul (as you mention). The parent nav element is the only one that is full viewport width – so it should have the background. The shadows will then slide up behind the background.

    Carl, which browser are you seeing the flicker in? I don’t see it FF, perhaps the OP doesn’t know about it.

    Tx3
    # January 29, 2013 at 9:49 am

    So that we’re talking about the same problem.

    Here is a screenshot of the problem (or two problems). First thing is that background kinda disappears from the .container it should have same background all the time. The second thing is the shadow (like TheDoc mentioned) of the other elements.

    The problem

    Any suggestions?

    # January 29, 2013 at 10:01 am

    The shadow from the other elements (left arrow) will disappear if you put the background on nav.main. Firefox doesn’t show the other problem – I didn’t see until I tried in Chrome just now. I’m looking into it…

    # January 29, 2013 at 10:09 am

    Okay, place the background on nav.main as stated. Then remove the background from the div, the ul, and the li

    Tx3
    # January 30, 2013 at 6:52 am

    Excellent! Thank you.

    It seems that FlexSlider is causing some weird effects to the site in general. That is something I need to check also.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".