All geek questions in one place

Bootstrap popup window overlapping a div container instead of dropping it

I recently started working with Twitter Bootstrap, and I find it quite intuitive, except for one.

I am currently creating a wrapper site ( .sliderwrap class) containing an image that will eventually be replaced with an image slider. The image / slider superimposed the text h1 , which is absolutely.

With smaller screen widths, my navigation menu turns into a drop-down menu. When the drop-down list is open, it moves the image within the .sliderwrap , but overlaps the .sliderwrap itself and the absolutely positioned text, rather than pushing it. This obviously destroys the h1 text that I would like to move around the page along with the image.

How can I make drop-down push .sliderwrap myself and not overlap some of them?

Here is the page I came across. (Sorry for the style of the dropdown menu itself, it's far from over!)

+4
source share
2 answers

I think that the easiest solution for this would be that you need to clear your floats in the main and additional menus.

As you can see, you have:

 <div class="navbar navbar-static-top">...</div>

And you also have:

 <div class="secondmenu">...</div>

The easiest way to clean them is to place them inside the .row or .row-fluid class. I also suggest that you get used to adding lines to your code when you can understand these things so clearly.

Your code should look like this:

 <div class="row"> <div class="navbar navbar-static-top">...</div> <div class="secondmenu">...</div> </div>

And last but not least, your text is not positioned absolutely relative to the div slider, but instead for the Chrome browser, so you need to make your position: relative slider container so that any elements set to position: absolute inside this container ( in this case, your h1 ) will be placed absolutely in accordance with its parent container.

So set this in your styles:

 .sliderwrap { position: relative; }

This pretty much fixes your dual menu so that it clears the slider and text. Let me know if this works for you, and if you need any clarification in the answers, be sure to preempt or accept the answer if it works! Greetings.

+4
source

try it

body html

 <body class="blackley"> <!--content goes here--> <!-- Navigation --> <div style="position: relative;"> <div class="navbar navbar-static-top"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </a><a class="brand" href="#"> <img src="img/logo.png" class="logo" />Blackley Golf Club</a> <div class="firstmenu"> <div class="nav-collapse"> <ul class="nav"> <li><a href="#">Tee Bookings</a></li> <li><a href="#">Societies</a></li> <li><a href="#">Open Comps</a></li> <li><a href="#">Functions</a></li> </ul> <form class="navbar-search pull-right"> <input type="text" class="search-query" placeholder="Search here..."> </form> </div> </div> </div> </div> </div> <!-- End Navigation --> <!--begin second navigation --> <!--image slider --> <div class="sliderwrap"> <div class="secondmenu"> <div class=""> <ul class="menu"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Course</a></li> <li><a href="#">Pro Shop</a></li> <li><a href="#">Membership</a></li> <li><a href="#">Sections</a></li> <li><a href="#">History</a></li> <li><a href="#">News</a></li> </ul> </div> </div> <div class="friendlyclub container"> <h1> Welcome to Blackley Golf Club <br /> "The Friendly Club"</h1> </div> <img src="img/sliderphoto.png" alt="slider photo 1" /> </div> </div> <div class="weather"> </div> <!--Main content --> <div class="info"> <div class="container"> <div class="row"> <div class="span4"> <div class="imgborder"> <img src="img/lake.png" /> </div> </div> <div class="span8"> <h2> About Blackley Golf Club</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus, placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique non. Vivamus elementum est non urna mollis malesuada.</p> <p> Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique non. Vivamus elementum est non urna mollis malesuada.</p> </div> </div> </div> </div> <!-- End row --> <div class="main-content container"> <div class="row top-space"> <div class="span4 news"> <img src="img/newsphoto.png" alt="news photo" /> <p> June 27, 2013</p> <h2> Experience this summer with a bit of a bite...</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus, placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique non</p> <p class="readmore pull-right"> + Read More</p> </div> <div class="span4 news"> <img src="img/newsphoto.png" alt="news photo" /> <p> June 27, 2013</p> <h2> Experience this summer with a bit of a bite...</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus, placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique non</p> <p class="readmore pull-right"> + Read More</p> </div> <div class="span4 news"> <img src="img/newsphoto.png" alt="news photo" /> <p> June 27, 2013</p> <h2> Putt a bit of drive into your summer</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus tellus, placerat vitae faucibus ut, luctus sit amet est. Proin mollis velit nec leo mollis fringilla. Nunc vitae augue vitae elit feugiat malesuada. Integer libero nisi, sodales a auctor eget, ultrices nec justo. Nullam ullamcorper neque erat, in faucibus enim tristique non</p> <p class="readmore pull-right"> + Read More</p> </div> </div> <!-- End row --> <div class="row"> <div class="span12"> <ul class="footernav"> <li><a href="#">Home</a></li> <li><a href="#">Course</a></li> <li><a href="#">Pro Shop</a></li> <li><a href="#">Membership</a></li> <li><a href="#">Sections</a></li> <li><a href="#">History</a></li> <li><a href="#">News</a></li> <li><a href="#">Members Login</a></li> <li><a href="#">Location</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div> <!-- End row --> </div> </div> <!-- End container --> <!--End main content --> <div id="push"> </div> </div> <div class="navbar-inverse"> <div class="navbar-inner"> <div class="container"> <div class="pull-left"> <p class="footertext"> © 2003-2013 by Blackley Golf Course. All rights reserved.</p> </div> <div class="pull-right"> <p class="footertext"> Powered by Intelligolf</p> </div> </div> </div> <!-- JavaScripts --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--Typekit call --> </body>

override css

 /* CUSTOM STYLING */ /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'source-sans-pro' , sans-serif; font-weight: 400; background: #f6f7f0; } h2 { color: #0099ea; font-size: 18px; line-height: 20px; font-weight: 400; } /* NAVIGATION */ .navbar .brand { color: #0099ea; line-height: 60px; } .navbar .brand .logo { width: 70px; } .nav-collapse { background-color: #fff; z-index: 1000; width: 100%; } .navbar-inner { height: 80px; background: #ffffff; } .navbar-search { line-height: 70px; } .navbar-search .search-query { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav li { line-height: 60px; } .firstmenu { float: right; } /* SECOND NAV MENU */ .secondmenu { box-model: content-box; position: absolute; left: 3%; top: 20%; float: left; } .secondmenu .menu li { list-style: none; text-align: right; font-size: 18px; background-color: #424242; border-bottom: 5px #fff solid; display: inline-block; float: right; clear: right; margin-bottom: 7px; } .secondmenu .menu li.active { background-color: #0099ea; } .secondmenu .menu li a { display: block; color: #fff; height: 20px; margin-top: 10px; padding: 10px 15px 15px 40px; line-height: 5px; } /* SLIDER */ .friendlyclub { position: absolute; right: 160px; top: 100px; float: right; } .friendlyclub h1 { color: #fff; text-align: right; line-height: 50px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); } .sliderwrap { float: left; position: relative; width: 100%; } .sliderwrap img { margin-bottom: 0; min-width: 100%; max-height: 600px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .info { padding-top: 20px; padding-bottom: 20px; background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); } .imgborder { background: #f6f7f0; } .imgborder img { padding: 7px; } .top-space { margin-top: 50px; margin-bottom: 50px; } /* row of span4s, news */ .span4.news { position: relative; padding: 30px 30px 20px 30px; min-height: 444px; background: #ffffff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); } .span4.news h2 { margin-bottom: 15px; } .span4.news h3 { color: #999999; font-size: 18px; font-weight: 400; } .span4.news img { margin: 0 0 20px 0; width: 100%; } .span4.news p.readmore { position: absolute; text-transform: uppercase; bottom: 10px; right: 30px; } .imgborder { padding: 10px; } .full-width { width: 100%; } /* NAV ABOVE FOOTER */ .footernav { margin-bottom: 10px; margin-left: 0; } .footernav li { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; } .footernav li:after { content: ' /'; } .footernav li:last-child:after { content: ' '; } .footernav li a { color: #424242; } /* FOOTER */ .push { height: 40px; } .navbar-inverse { margin-bottom: -40px; } .navbar-inverse .navbar-inner { height: 40px; margin-top: 20px; } .navbar-inverse .navbar-inner .footertext { color: #ffffff; line-height: 40px; } /* RESPONSIVE */ @media screen and (max-width: 980px) { .firstmenu { clear: both; margin-right: -20px; display: block; position: relative; } .firstmenu { width: 50%; padding: 0; } .secondmenu { box-model: content-box; position: absolute; left: 3%; top: 20%; float: left; } .secondmenu li { text-align: left; float: left; } .secondmenu li a { text-align: left; float: left; } .secondmenu .menu li { list-style: none; text-align: right; font-size: 14px; border-bottom: 5px #fff solid; display: inline-block; float: left; clear: left; margin-bottom: 7px; } .secondmenu .menu li a { display: block; color: #777; height: 20px; margin-top: 10px; padding: 10px 15px 15px 40px; line-height: 5px; } .secondmenu .menu li + li a { margin-bottom: 2px; } .secondmenu .menu > li > a:hover, .secondmenu .menu > li > a:focus, .secondmenu .menu a:hover, .secondmenu .menu a:focus { background-color: #f2f2f2; text-decoration: none; } .secondmenu .menu > li > a, .secondmenu .menu a { padding: 9px 15px; display: block; width: 100%; font-weight: bold; color: #777777; margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
0
source

Source: https://habr.com/ru/post/1494947/

More articles:


All Articles