CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Kenny Low
Kenny Low

Reputation: 11

Cant get to the second page with Bootstrap (One Pager Landing Page)

For some reason I cant see my second page? Please help. My code is here: https://jsbin.com/dapowipize/edit?html,css,js,output

This is the live preview https://output.jsbin.com/dapowipize If you zoom out, you will see a text "Hi," but for some reason, I cannot scroll down to it...

Please help :(

Many thanks!

Kenny

Upvotes: 0

Views: 97

Answers (2)

acamp120
acamp120

Reputation: 98

Your JavaScript is limiting the page's view to the window's height:

var screenHeight = $(window).height();

Try toying around with viewport height in your CSS, instead.

JS Fiddle: https://jsfiddle.net/ufowjgb7/

CSS:

.site-wrapper {
    position: relative;
    margin-top: 60px;
}

.navbar {
    position: aboslute;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #ff0000;
    color: #fff;
}

.welcome {
    width: 100%;
    height: 100vh;
    background-color: #d0d0d0;
}

.cover-page1 {
    width: 100%;
    height: 100vh;
    background-color: #00ff00;
    color: #fff;
}

.cover-page2 {
    width: 100%;
    height: 100vh;
    background-color: #0000ff;
    color: #fff;
}

HTML:

<div class="navbar">
    Navbar
</div>

<div class="welcome">
    Welcome area
</div>

<div class="cover-page1">
    Your first cover area
</div>

<div class="cover-page2">
    Your next cover area
</div>

Upvotes: 2

Orlando Paredes Hamsho
Orlando Paredes Hamsho

Reputation: 116

This is currently your code:

<div class="navbar navbar-default navbar-fixed-top">
/*everything else*/

Just close the div after your first container div, then you can get to your hi.

<div class="navbar navbar-default navbar-fixed-top">
    /*First container*/
    <div class="container">
        <div class="navbar-header">
            /*Code that goes inside this div*/
        </div>
    </div>
</div>
<div class="container">
/*Rest of your code*/

The reason for this is that with your div open it's making the rest of the page be a part of the nav, and since the nav is fixed at the top, there's no way of going down to see the rest of the page. Let me know if this helps.

Upvotes: 0

Related Questions