CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarousel
Kenton
Kenton

Reputation: 1

Bootstrap Carousel auto-scrolls whole page when changing slides

I'm trying to add a bootstrap carousel to our existing website www.121studios.ca. Currently the carousel works fine except the page scrolls up so that the carousel lines up with the top of the browser. I think it has something do to with the navbar and the way it auto-scrolls to a section that you select.

https://jsfiddle.net/zocpu8oo/5/

This is the code for navbar, I'm not sure why it scrolls even though the carousel section isn't included. (quick note: the carousel is between the about section and membership section if that makes a different)

(before I click next)

(after I click next) 

<header id="header" class="light">
    <!-- Logo: Delete "class="logo"" to remove the logo or upload your own logo to "assets/images". -->
    <a id="logo" href="#intro"></a>

    <!-- Navigation: Each item below must correspond with the "section" id's defined below. -->
    <ul id="navigation">
        <li class="current"><a href="#intro">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#menu">Membership</a></li>
        <li><a href="#locations">Locations</a></li>
        <li><a href="#news">News</a></li>
        <!-- <li><a href="http://121studios.tumblr.com">Blog</a></li> -->
    </ul>
</header>

Upvotes: 0

Views: 1044

Answers (1)

StudioTime
StudioTime

Reputation: 23989

Its because the navigation is position: fixed - if you add say margin-top: 100px to #intro it works as planned

Upvotes: 1

Related Questions