html - Moving the Search Bar to specific location in Bootstrap 3 -
i have search bar appears @ center of page. move 1/4 of way. how achieve this? code below.
update:
using developer tools in chrome, able make work temporarily using following steps:
- inspect element "developer tools"
- uncheck "display: table-cell;" in .intro .intro-body
- click on "element.style"
- type "margin-top: 300px;"
i can play around position of search bar. however, whenever refresh browser lost!
thanks!
<!-- intro header --> <header class="intro"> <div class="intro-body"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> </form> <form action="/predict" style="width: 500px; margin: 0.3em 2em;" method='post'> <div class="input-group"> <input type="text" name="user_input" class="form-control" placeholder="search indie games"> <div class="input-group-btn"> <button type="submit" class="btn btn-primary">recommend</button> </div> </div> </form> </div> </div> </div> </div> </header> the associated css file can found here:
https://dl.dropboxusercontent.com/u/23725837/bootstrap.css
this how whole thing looks like:
the custom css here:
/*! * start bootstrap - grayscale bootstrap theme (http://startbootstrap.com) * code licensed under apache license v2.0. * details, see http://www.apache.org/licenses/license-2.0. */
> body { > width: 100%; > height: 100%; > font-family: lora,"helvetica neue",helvetica,arial,sans-serif; > color: #fff; > background-color: #000; } > > html { > width: 100%; > height: 100%; } > > h1, h2, h3, h4, h5, h6 { > margin: 0 0 35px; > text-transform: uppercase; > font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; > font-weight: 700; > letter-spacing: 1px; } > > p { > margin: 0 0 25px; > font-size: 18px; > line-height: 1.5; } > > @media(min-width:768px) { > p { > margin: 0 0 35px; > font-size: 20px; > line-height: 1.6; > } } > > { > color: #42dca3; > -webkit-transition: .2s ease-in-out; > -moz-transition: .2s ease-in-out; > transition: .2s ease-in-out; } > > a:hover, a:focus { > text-decoration: none; > color: #1d9b6c; } > > .light { > font-weight: 400; } > > .navbar-custom { > margin-bottom: 0; > border-bottom: 1px solid rgba(255,255,255,.3); > text-transform: uppercase; > font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; > background-color: #000; } > > .navbar-custom .navbar-brand { > font-weight: 700; } > > .navbar-custom .navbar-brand:focus { > outline: 0; } > > .navbar-custom .navbar-brand .navbar-toggle { > padding: 4px 6px; > font-size: 16px; > color: #fff; } > > .navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom > .navbar-brand .navbar-toggle:active { > outline: 0; } > > .navbar-custom { > color: #fff; } > > .navbar-custom .nav li { > -webkit-transition: background .3s ease-in-out; > -moz-transition: background .3s ease-in-out; > transition: background .3s ease-in-out; } > > .navbar-custom .nav li a:hover { > outline: 0; > color: rgba(255,255,255,.8); > background-color: transparent; } > > .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { > outline: 0; > background-color: transparent; } > > .navbar-custom .nav li.active { > outline: 0; } > > .navbar-custom .nav li.active { > background-color: rgba(255,255,255,.3); } > > .navbar-custom .nav li.active a:hover { > color: #fff; } > > @media(min-width:768px) { > .navbar-custom { > padding: 20px 0; > border-bottom: 0; > letter-spacing: 1px; > background: 0 0; > -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; > -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; > transition: background .5s ease-in-out,padding .5s ease-in-out; > } > > .navbar-custom.top-nav-collapse { > padding: 0; > border-bottom: 1px solid rgba(255,255,255,.3); > background: #000; > } } > > .intro { > display: table; > width: 100%; > height: auto; > padding: 100px 0; > text-align: center; > color: #fff; > background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; > background-color: #000; > -webkit-background-size: cover; > -moz-background-size: cover; > background-size: cover; > -o-background-size: cover; } > > .intro .intro-body { > display: table-cell; > vertical-align: middle; } > > .intro .intro-body .brand-heading { > font-size: 40px; } > > .intro .intro-body .intro-text { > font-size: 18px; } > > @media(min-width:768px) { > .intro { > height: 100%; > padding: 0; > } > > .intro .intro-body .brand-heading { > font-size: 80px; > } > > .intro .intro-body .intro-text { > font-size: 26px; > } } > > .btn-circle { > width: 70px; > height: 70px; > margin-top: 15px; > padding: 7px 16px; > border: 2px solid #fff; > border-radius: 100%!important; > font-size: 40px; > color: #fff; > background: 0 0; > -webkit-transition: background .3s ease-in-out; > -moz-transition: background .3s ease-in-out; > transition: background .3s ease-in-out; } > > .btn-circle:hover, .btn-circle:focus { > outline: 0; > color: #fff; > background: rgba(255,255,255,.1); } > > .btn-circle i.animated { > -webkit-transition-property: -webkit-transform; > -webkit-transition-duration: 1s; > -moz-transition-property: -moz-transform; > -moz-transition-duration: 1s; } > > .btn-circle:hover i.animated { > -webkit-animation-name: pulse; > -moz-animation-name: pulse; > -webkit-animation-duration: 1.5s; > -moz-animation-duration: 1.5s; > -webkit-animation-iteration-count: infinite; > -moz-animation-iteration-count: infinite; > -webkit-animation-timing-function: linear; > -moz-animation-timing-function: linear; } > > @-webkit-keyframes pulse { > 0% { > -webkit-transform: scale(1); > transform: scale(1); > } > > 50% { > -webkit-transform: scale(1.2); > transform: scale(1.2); > } > > 100% { > -webkit-transform: scale(1); > transform: scale(1); > } } > > @-moz-keyframes pulse { > 0% { > -moz-transform: scale(1); > transform: scale(1); > } > > 50% { > -moz-transform: scale(1.2); > transform: scale(1.2); > } > > 100% { > -moz-transform: scale(1); > transform: scale(1); > } } > > .content-section { > padding-top: 100px; } > > .download-section { > width: 100%; > padding: 50px 0; > color: #fff; > background: url(../img/downloads-bg.jpg) no-repeat center center scroll; > background-color: #000; > -webkit-background-size: cover; > -moz-background-size: cover; > background-size: cover; > -o-background-size: cover; } > > #map { > width: 100%; > height: 200px; > margin-top: 100px; } > > @media(min-width:767px) { > .content-section { > padding-top: 250px; > } > > .download-section { > padding: 100px 0; > } > > #map { > height: 400px; > margin-top: 250px; > } } > > .btn { > border-radius: 0; > text-transform: uppercase; > font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; > font-weight: 400; > -webkit-transition: .3s ease-in-out; > -moz-transition: .3s ease-in-out; > transition: .3s ease-in-out; } > > .btn-default { > border: 1px solid #42dca3; > color: #42dca3; > background-color: transparent; } > > .btn-default:hover, .btn-default:focus { > border: 1px solid #42dca3; > outline: 0; > color: #000; > background-color: #42dca3; } > > ul.banner-social-buttons { > margin-top: 0; } > > @media(max-width:1199px) { > ul.banner-social-buttons { > margin-top: 15px; > } } > > @media(max-width:767px) { > ul.banner-social-buttons li { > display: block; > margin-bottom: 20px; > padding: 0; > } > > ul.banner-social-buttons li:last-child { > margin-bottom: 0; > } } > > footer { > padding: 50px 0; } > > footer p { > margin: 0; } > > ::-moz-selection { > text-shadow: none; > background: #fcfcfc; > background: rgba(255,255,255,.2); } > > ::selection { > text-shadow: none; > background: #fcfcfc; > background: rgba(255,255,255,.2); } > > img::selection { > background: 0 0; } > > img::-moz-selection { > background: 0 0; } > > body { > webkit-tap-highlight-color: rgba(255,255,255,.2); }
assuming downloaded custom css file (for grayscale bootstrap theme), can change .intro .intro-body entry to:
.intro .intro-body { display: table-cell; vertical-align: middle; margin-top: 300px; /* adjust value here desired */ } if did not (and linking theme somewhere else, cdn), can create own css file entry (as above) , include site after custom css file (effectively, overriding theme's value)
Comments
Post a Comment