CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lopu
lopu

Reputation: 172

navbar extending past all other page div widths and creating empty white space on page resize

I have this crap and when I view it on different devices a horizontal scroll bar appears when the width goes below 890 pixels. Now none of the sections of the site extend to this white bit so it looks ugly as, but the navbar does, so I feel the issue is lying in the navbar styling?

Here's all my navbar code

<div class="container-fluid mynav">
  <ul class="uppercase mynavmenu">
    <li><a href="http://danceforovariancancer.com.au">Home</a></li>
    <li><a class="scroll" href="#about">about</a></li>
    <li><a class="scroll" href="#register">register</a></li>
    <li><a class="scroll" href="#acts">acts</a></li>
    <li><a class="scroll" href="#faq">faq</a></li>
    <li><a class="scroll" href="#contact">contact</a></li>
  </ul>

And here's all the styling for it apart from the bootstrap stuff.

    /** --------------------------------------------------------- NAVIGATION STYLING ----------------------------------------------------------------- **/


.mynav {
    padding-top: 25px;
    padding-bottom: 15px;
    background-color: #0094ab;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 9999;
}

.mynavmenu li {
    display: inline;
}

.mynavmenu a {
    margin-left: 24px;
    margin-right: 27px;
    padding-left: 6px;
    padding-right: 3px;
    display: inline-block;
    color: #fff;
    letter-spacing: 3px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    text-align: center;
}

.mynavmenu a:hover, .mynavmenu a:focus, .mynavmenu a:active {
    display: inline-block;
    color: #e2faff;
    letter-spacing: 3px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.13);
}

.mynavmenu {
    text-align: center;
}

thanks all, I can't see any reason it'd be extending over. I have yet to do media queries for the site so maybe an col-offset is pushing it over? But I doubt it, cheers.

Upvotes: 0

Views: 112

Answers (1)

Johannes
Johannes

Reputation: 67776

this should help (in a media query for smaller screens):

.dfocimg { width: 100%; }

Upvotes: 1

Related Questions