css - Carousel arrows overlapping above navbar in Bootstrap 3 -
i have site let user choose between different layout base on bootstrap.
when carousel above navbar, works fine (select bannerfirst colour theme below). when carousel below navbar, navigation arrows of carousel overlapping above navbar, making irresponsive (select headerfirst...).
i sure simple css trick solve problem. idea?
you shouldn't need column around navbar; remove "col-md-12" div above navbar. see example.
@font-size-base: 18px; #map-container { height: 600px; width: 100%; } #minimap-container { min-height: 200px; width: 100%; } .mini0, .mini1, .mini2, .mini3, .mini4, .mini5 { font-size: 9px; font-weight: normal; text-decoration: none; } .mini0 { color: red; } .mini1 { color: grey; } .mini2 { color: orange; } .mini3 { color: green; } .mini4 { color: blue; } .mini5 { color: violet; } .icon16link { border: 0px; background-color: transparent; width: 16px; cursor: pointer; vertical-align: text-bottom; } .icon12link { border: 0px; background-color: transparent; width: 12px; cursor: pointer; vertical-align: text-bottom; } .iconlink { border: 0px; cursor: pointer; vertical-align: text-middle; } .iconxlink { cursor: pointer; background-color: #dddddd; vertical-align: text-middle; } .iconnolink { border: 0px; vertical-align: text-middle; } .minithumb { height: 24px; } .star { vertical-align: middle; } body { font-family: verdana; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } h1, h2, h3, h4, h5, h6 {} p { font-size: 1.25em; line-height: 1.6; color: #000; } hr { max-width: 400px; border-color: #999999; } .brand, .address-bar { display: none; } .navbar-brand { text-transform: uppercase; font-weight: 900; letter-spacing: 2px; } .navbar-nav { text-transform: uppercase; letter-spacing: 3px; } .img-full { min-width: 100%; } .brand-before, .brand-name { text-transform: capitalize; } .brand-before { margin: 15px 0; } .brand-name { margin: 0; font-size: 3em; } .tagline-divider { margin: 15px auto 3px; max-width: 250px; border-color: #999999; } .box { margin-bottom: 0px; padding: 0px 0px; background: #fff; background: rgba(255, 255, 255, 0.9); } .intro-text { text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 1px; } .img-border { float: none; margin: 0 auto 0; border: #999999 solid 1px; } .img-left { float: none; margin: 0 auto 0; } footer { background: #fff; background: rgba(255, 255, 255, 0.9); } footer p { margin: 0; padding: 50px 0; } @media screen , (min-width: 768px) { .brand { display: inherit; margin: 0; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); font-family: verdana, arial, sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #fff; } .top-divider { margin-top: 0; } .img-left { float: left; margin-right: 25px; } .address-bar { display: inherit; margin: 0; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #fff; } .navbar { border-radius: 0; } .navbar-header { display: none; } .navbar { min-height: 0; } .navbar-default { border: none; background: #fff; background: rgba(255, 255, 255, 0.9); } .nav>li>a { padding: 10px; } .navbar-nav>li>a { line-height: normal; } .navbar-nav { display: table; float: none; margin: 0 auto; table-layout: fixed; font-size: 1.0em; } } @media screen , (min-width: 1200px) { .box:after { content: ''; display: table; clear: both; } } /* carousel */ .carousel, .carousel-inner > .item { display: run-in; width: 100%; height: auto!important; } .carousel-inner > .item > img, .carousel-inner > .item > > img { display: block; height: auto; max-width: 100%; line-height: 1; } .carousel-container { margin-left: 0; } .carousel-caption { z-index: 10; } /* special elements */ .prop_body {} .prop_address { font-size: 1em; } .prop_copyright { font-size: 0.8em; } .prop_snapshot { padding: 6px; } .prop_highlights { padding: 6px; } .prop_review { padding: 6px; } .prop_minimap { padding: 6px; } .prop_sidephotos { padding: 6px; } .prop_agent { padding: 6px; } .colleft { padding-top: 0px; } .colcenter { padding-top: 0px; } .colright { padding-top: 0px; } /* gallery */ /* popup large picture */ .ddimgtooltip { box-shadow: 3px 3px 5px #666; /* shadow css3 capable browsers */ -webkit-box-shadow: 3px 3px 5px #666; -moz-box-shadow: 3px 3px 5px #666; display: none; position: absolute; border: 1px solid black; background: grey; color: white; z-index: 2000; padding: 8px; word-wrap: normal; max-width: 480px; } .gallerythumb { margin-bottom: 16px; margin-right: 16px; } .mini1 { font-size: 0.8em; } /* main tags */ body { background: #fff; } /* whole screen bgn color */ /* body { background: url('../xmedia/bgn/pool2.jpg') no-repeat center fixed; } */ p { color: #666; } /* text font color */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #4190b0; } /* titles font color */ h2, .h2 {} /* h2 title font color */ h3, .h3 { color: #a6a6a6; } /* h3 title font color */ h4, .h4 { color: #cecece; } /* h4 title font color */ h5, .h5 {} /* h5 title font color */ h6, .h6 {} /* h6 title font color */ /* navbar */ .navbar-default { background: transparent; } /* navbar bgn color */ .navbar-default .navbar-nav > li > { color: #4190b0; } /* navbar item font color */ .navbar-default .navbar-nav > li > a:hover { color: #39626f; } /* navbar item hover font color */ .navbar-default .navbar-nav > li > a:focus { color: #39626f; } /* navbar item focus font color */ .navbar-default .navbar-nav > .active > { color: #fff; background-color: #4190b0; } /* active navbar item bgn & font color */ .navbar-default .navbar-nav > .active > a:hover { color: #fff; background-color: #39626f; } /* active navbar item hover bgn & font color */ .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #39626f; } /* active navbar item focus bgn & font color */ /* components */ .brand-name { color: #69a2c8; } /* brand-name font color */ .brand-subname { color: #69a2c8; } /* brand-subname font color */ .brand-strapline { color: #999; } /* brand-strapline font color */ .prop_address { color: #888; } /* address font color */ .prop_copyright { color: #999; } /* copyright font color */ .prop_highlights, .prop_highlights p { background: #3673b8; color: #fff; } /* highlights bgn color */ .prop_snapshot { background: #3673b8; color: #fff; } /* keyfigures bgn color */ .prop_review, .prop_review p { background: #9eb8cf; color: #fff; } /* review bgn color */ .prop_agent { background: #9eb8cf; } /* review bgn color */ .prop_minimap { border: 1px solid grey; background: #fff; } /* minimap bgn color */ .prop_sidephotos { background: #fff; } /* sidephotos bgn color */ .btn-info { background: #39626f; border-color: #39626f; } /* button bgn color */ .reviewtitle { color: #fff; } .reviewauthor { color: #cecece; font-size: 0.9em; font-style: italic; text-align: center; } .reviewmore { text-align: right; color: blue; } .guestbooktitle { color: #000; font-size: 1.2em; } .guestbookquote { color: #000; font-size: 1.1em; } .guestbookauthor { color: #cecece; font-size: 1em; font-style: italic; } .propertyname { color: #69a2c8; font-size: 1.4em; } .propertystrapline { color: #666; font-size: 1em; font-style: italic; } .propertytext { color: #888; font-size: 0.9em; } .owner { border: 0px solid red; } /* fonts & size */ /* body */ body { font-family: verdana; } /* titles */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-transform: uppercase; font-family: verdana; } h1, .h1 { font-size: 1.8em; letter-spacing: 2px; } h2, .h2 { font-size: 1.6em; letter-spacing: 2px; } h3, .h3 { text-transform: capitalize; font-size: 1.4em; letter-spacing: 1px; } h4, .h4 { font-size: 1.3em; letter-spacing: 1px; } h5, .h5 { font-size: 1.2em; letter-spacing: 1px; } h6, .h6 { font-size: 1.1em; letter-spacing: 1px; } /* paragraph */ p { font-size: 1em; line-height: 1.6; } /* nav */ .navbar-default { font-size: 1.05em; letter-spacing: 6px; text-weight: bold; text-transform: uppercase; } /* brand */ .brand-name { font-family: times; font-size: 2.8em; } .brand-subname { font-family: times; font-size: 1em; } .brand-strapline { font-size: 1.4em; } /* image */ .img-border { border: #999999 solid 1px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container prop_name" style=""> <div class="row"> <div class="col-md-12 text-center"> <p class="brand-name">showcase <span class="brand-subname">beach house</span> </p> </div> </div> </div> <!-- /.container --> <div class="container prop_strapline" style=""> <div class="row"> <div class="col-md-12 text-center"> <p class="brand-strapline">one of best in hyams - infinity pool , private beach access</p> </div> </div> </div> <!-- /.container --> <!-- nav bar --> <div class="text-center"> <nav class="navbar navbar-default" role="navigation"> <div class="container prop_navbar" style=""> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/template/index.php?menu=home">home</a> </li> <li class=""><a href="/template/index.php?menu=features">features</a> </li> <li class=""><a href="/template/index.php?menu=activities">activities</a> </li> <li class=""><a href="/template/index.php?menu=gallery">gallery</a> </li> <li class=""><a href="/template/index.php?menu=rates">rates</a> </li> <li class=""><a href="/template/index.php?menu=guestbook">guestbook</a> </li> <li class=""><a href="/template/index.php?menu=map">map</a> </li> <li class=""><a href="/template/index.php?menu=contact">contact</a> </li> </ul> </div> </div> </nav> </div> <!-- banner --> <div class="container prop_banner" style=""> <div class="carousel-container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators hidden-xs"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="4" class=""></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://www.helloguest.com.au/admin/zgetimagemanip.php?src=http%3a%2f%2fwww.helloguest.com.au%2fxmedia%2fpicture%2fbigphotos%2fp000002%2fhg_000035.jpg&w=1200&h=480" alt="image #0"> <div class="carousel-caption">main : infinity pool - wines [© showcase]</div> </div> <div class="item "> <img src="http://www.helloguest.com.au/admin/zgetimagemanip.php?src=http%3a%2f%2fwww.helloguest.com.au%2fxmedia%2fpicture%2fbigphotos%2fp000002%2fhg_000035.jpg&w=1200&h=480" alt="image #1"> <div class="carousel-caption">aerial : aerial view [© showcase]</div> </div> <div class="item "> <img src="http://www.helloguest.com.au/admin/zgetimagemanip.php?src=http%3a%2f%2fwww.helloguest.com.au%2fxmedia%2fpicture%2fbigphotos%2fp000002%2fhg_000035.jpg&w=1200&h=480" alt="image #2"> <div class="carousel-caption">exterior : house - beach night [© showcase]</div> </div> <div class="item "> <img src="http://www.helloguest.com.au/admin/zgetimagemanip.php?src=http%3a%2f%2fwww.helloguest.com.au%2fxmedia%2fpicture%2fbigphotos%2fp000002%2fhg_000035.jpg&w=1200&h=480" alt="image #3"> <div class="carousel-caption">outdoors : north deck [© showcase]</div> </div> <div class="item "> <img src="../admin/zgetimagemanip.php?src=http%3a%2f%2fwww.helloguest.com.au%2fxmedia%2fpicture%2fbigphotos%2fp000002%2fhg_000051.jpg&w=1200&h=480" alt="image #4"> <div class="carousel-caption">outdoors : upper level - night [© showcase]</div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> </div> </div>
Comments
Post a Comment