Why is my navigation not vertical when using Fullpage.js?

Question

I'm implementing Fullpage.js

I believe I've followed the documentation properly however, the navigation seems to be stuck in horizontal format even though I've selected the vertical navigation.

I'll post my code below, but here is a live version.

HTML

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

JS

<script>
    $(document).ready(function () {
        $('#fullpage').fullpage({
            css3: true,
            navigation: true,
            navigationPosition: 'right',
            keyboardScrolling: true,
            controlArrows: true
        });
    });
</script>

The CSS is being pulled from the source files which I haven't touched, and it's after my stylesheet so there should be no overriding issues. Console log is showing no issues.

I've also noticed that the first nav dot has more padding on the right.

Answer 1

It appears that my non specific li and ul's in my stylesheet were overriding the fullpage.js stylesheets. For example when I replace my li:hover with .divName li:hover it fixed the problem.

One thing that is confusing me how this happened, especially since the DOM was reading the fullpage.css file last.

Answer 2

"style.css" has conflict with "jquery.fullPage.css".