Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS troubleshooting sticky menu with full width jumbotron banner

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #243570

    I have a sticky menu inside of a bootstrap jumbotron class banner. For some reason when you scroll down and left there is about 20px of white space. Not sure what is going on.

    Here is the top of the page where I think the issue is:

    <!-- Header and Nav -->
    <div class="jumbotron">
    
      <header class="navbar navbar-inverse hero" data-spy="affix" data-offset-top="90" role="banner">
    
        <div class="container">
          <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand">
              <img src="assets/img/black-cloister-logo.png">
            </a>
          </div>
    
          <nav class="collapse navbar-collapse bs-navbar-collapse pull-right " role="navigation">
            <ul class="nav navbar-nav">
    
              <li class=""><a href="our-brewery.html">Our Brewery</a></li>
              <li class=""><a href="our-beers.html">The Beers</a></li>
              <li class=""><a href="mug-club.html">The Mug Club</a></li>
              <li class=""><a href="news.html">News</a></li>
              <li class=""><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </div><!-- close container -->
      </header>
    
      <!-- top intro-->
      <div class="container">
        <div class="row intro" >
          <div class="col-md-12 text-center">
            <h1 class="brand-title">Black Cloister Brewing Company</h1>
            <h2 class="page-slogan">Our Beers</h2>
          </div> <!-- close col-md-12 -->       
        </div><!-- close row -->
      </div><!-- close container -->
    </div> <!-- close jumbotron -->
    

    Here is a live demo:
    http://aaronhaas.com/bc/our-beers.html

    #243571
    bearhead
    Participant

    The extra space issue should go away if you remove this from your css:

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    

    I’m noticing that the menu links are running off the window though… it seems like there are some larger positioning issues you should address.

    #243591

    yep that fixed it. thanks!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.