Bootstrap navbar and footer alignment -
i using standard bootstrap 3 navbar , trying align text of menu options on same horizontal level text , pictures in footer.
basically on left side want first letter of menu item "home" vertically aligned first letter of footer, item "impressum".
on right side want image of footer aligned last item of menu, contact.
any highly appreciated.
here code:
<nav id="navbar-primary" class="navbar navbar-default" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse"> <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 class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">home</a></li> <li><a href="collection.html">collection</a></li> <li><a href="web-shop.html">online shop</a></li> <li><a href="philosophie.html">about us</a></li> <li><a href="contact.html">contact</a></li> </ul> </div><!-- /.navbar-collapse --> <hr> </div><!-- /.container-fluid --> </nav> <!-- footer --> <div id="footer"> <div class="row"> <hr> <div class="col-lg-6 col-lg-offset-1 col-xs-6"> <a href="impressum.html"> impressum </a> | <a href="info.html"> info </a> | <a href="pdf/presse.pdf"> presse </a> </p> </div> <div class="col-lg-1 col-xs-2"> <a href="http://pinterest.com"> <img src="img/pinterest.png" alt="" class="img-responsive"></a> </div> <div class="col-lg-1 col-xs-2"> <a href="http://instagram.com"> <img src="img/instagram.png" alt="" class="img-responsive"></a> </div> <div class="col-lg-1 col-xs-2"> <a href="http://facebook.com"> <img src="img/facebook.png" alt="" class="img-responsive"></a> </div> </div> <!-- /.row --> </div> and here css:
#navbar-primary.navbar-default { background: transparent; border: none; } #navbar-primary.navbar-default .navbar-nav { width: 100%; text-align: center; } #navbar-primary.navbar-default .navbar-nav > li { display: inline-block; float: none; } #navbar-primary.navbar-default .navbar-nav > li > { color: rgba(77, 77, 77, 1); background-color: rgba(248, 248, 248, 0); padding-left: 50px; padding-right: 50px; padding-top: 5px; padding-bottom: 5px; } #navbar-primary.navbar-default .navbar-nav>li>a:hover, #navbar-primary.navbar-default .navbar-nav>li>a:focus { color: rgba(151, 211, 210, 1); background-color: rgba(255, 255, 255, 1); } #navbar-primary.navbar-default .navbar-nav>.active>a, #navbar-primary.navbar-default .navbar-nav>.active>a:hover, #navbar-primary.navbar-default .navbar-nav>.active>a:focus { color: rgba(151, 211, 210, 1); background-color: rgba(255, 255, 255, 1);
i think should set css according layout, far made alteration in css check code
/* latest compiled , minified css included external resource*/ /* optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } #navbar-primary.navbar-default { background: transparent; border: none; } #navbar-primary.navbar-default .navbar-nav { width:100%; text-align: center; } #navbar-primary.navbar-default .navbar-nav > li { display: block; float: left; } #navbar-primary.navbar-default .navbar-nav > li > { color: rgba(77, 77, 77, 1); background-color: rgba(248, 248, 248, 0); padding-left: 50px; padding-right: 48px; width:15px; } #navbar-primary.navbar-default .navbar-nav>li>a:hover, #navbar-primary.navbar-default .navbar-nav>li>a:focus { color: rgba(151, 211, 210, 1); background-color: rgba(255, 255, 255, 1); } #navbar-primary.navbar-default .navbar-nav>.active>a, #navbar-primary.navbar-default .navbar-nav>.active>a:hover, #navbar-primary.navbar-default .navbar-nav>.active>a:focus { color: rgba(151, 211, 210, 1); background-color: rgba(255, 255, 255, 1);
Comments
Post a Comment