I've recently started working with Twitter Bootstrap and am finding it fairly intuitive except for one thing.
I'm currently building a site featuring a wrapper (class .sliderwrap) containing an image, which will ultimately be replaced with an image slider. The image/slider has overlaid h1 text which is positioned absolutely.
On smaller screen widths, my navigation menu turns into a dropdown. When the dropdown is open, it pushes down the image within .sliderwrap, but overlaps .sliderwrap itself and the absolutely positioned text rather than pushing it down. This obviously ruins the h1 text, which I'd like to travel down the page along with the image.
How do I make the dropdown push .sliderwrap itself down rather than overlapping some of it?
Here's the page I'm having the issue with. (excuse the styling of the dropdown itself, it's far from finished!)
I've recently started working with Twitter Bootstrap and am finding it fairly intuitive except for one thing.
I'm currently building a site featuring a wrapper (class .sliderwrap) containing an image, which will ultimately be replaced with an image slider. The image/slider has overlaid h1 text which is positioned absolutely.
On smaller screen widths, my navigation menu turns into a dropdown. When the dropdown is open, it pushes down the image within .sliderwrap, but overlaps .sliderwrap itself and the absolutely positioned text rather than pushing it down. This obviously ruins the h1 text, which I'd like to travel down the page along with the image.
How do I make the dropdown push .sliderwrap itself down rather than overlapping some of it?
Here's the page I'm having the issue with. (excuse the styling of the dropdown itself, it's far from finished!)
Share Improve this question edited Aug 2, 2013 at 12:56 Adrian Heine 4,1413 gold badges32 silver badges43 bronze badges asked Aug 2, 2013 at 11:58 Emma WEmma W 6711 gold badge7 silver badges24 bronze badges2 Answers
Reset to default 4I'm thinking that the easiest solution for this will be that you need to clear your floats in the primary and secondary menu.
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 clear these would be to put them inside a .row class or .row-fluid. I also suggest that you get into the habit of adding rows to your code when you can so these kinds of things clear.
Your code should end up looking like this:
<div class="row">
<div class="navbar navbar-static-top">...</div>
<div class="secondmenu">...</div>
</div>
Last but not least... your text is not positioned absolutely in relation to the slider div, but instead to the browser chrome, so you need to make your slider container have a position: relative so any elements set to position: absolute inside that container (in this case your h1) will be positioned absolutely according to it's parent container.
So set this in your styles as well:
.sliderwrap {
position: relative;
}
That pretty much fixes your double menu so it clears the slider and the text. Let me know if this works for you and if you need any clarification on the answers, don't forget to upvote or accept the answer if it works! Cheers.
try this
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>
Wele 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./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;
}