html - How do I align a Logo next to navigation links that are horizontally centered? -
i've been struggling last several hours positioning logo right of centered navigation links in responsive navbar. tried dozens of ways work without luck. left of css navbar intact; bootstrap 3. assistance appreciated! link site is:
many thanks!
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <!-- fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <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> <a class="navbar-brand" href="indexalt.html"> <img src="data2/test5.png" width="61" height="48"> </a> <div class="navbar-text"> <span class="futurefont">future youth <span style="color:#ee1b04; font-size: 16px;">r</span>ecords</span> </div> </div> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="ourteam.html">news</a> </li> <li class="dropdown"> <a href="aboutus.html" class="dropdown-toggle">about us</a> <ul class="dropdown-menu"> <li><a href="ourteam.html">our team</a> </li> <li><a href="#">mission</a> </li> <li><a href="#">contact</a> </li> </ul> </li> <li><a href="#">projects</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">media</a> <ul class="dropdown-menu"> <li><a href="#">audio</a> </li> <li><a href="#">video</a> </li> <li><a href="#">photos</a> </li> <li><a href="#">enter download code</a> </li> </ul> </li> <li><a href="#">donate</a> </li> </ul> </span> <div class="sociallinks pull-right"> <a href=""> <img id="aks" src="data2/fb1.png" width="32" height="32"> </a> <a href=""> <img id="akst" src="data2/twitter1.png" width="32" height="32"> </a> <a href=""> <img id="aksy" src="data2/youtube1.png" width="32" height="32"> </a> </span> </div> </div> <!--/.nav-collapse --> </div> </nav>
your html had unclosed divs, divs, wrong classes, , lots of issues. it's best follow examples on getbootstrap.com letter , comment , indent code. when have problem requires getting help, make effort use clean, valid, html following documentation.
the .navbar bootstrap specific, it's left or right , that's it. have understand css , positioning etc., change around. , have adept @ responsive css , become fluent bootstrap css well.
this not finished product. height of navbar in situation dependent on height of tallest child, logo. logo 60px tall 10px padding on top , bottom, 80px line-height on first child of links used make center inside there. otherwise there lot more css create.
demo: https://jsbin.com/tupay/1/
https://jsbin.com/tupay/1/edit?html,css,output
html:
<!-- fixed navbar --> <nav class="navbar-center navbar-inverse navbar-fixed-top" role="navigation" id="nav"> <div class="container"> <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> <a class="logo" href="indexalt.html"> <img src="http://placehold.it/60x60/ffffff/000000&text=logo"> </a> <div id="navbar" class="my-collapse collapse"> <ul class="navbar-center navbar-nav nav"> <li> <a href="ourteam.html">news</a> </li> <li class="dropdown"> <a href="aboutus.html" class="dropdown-toggle" data-toggle="dropdown">about <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="ourteam.html">our team</a> </li> <li><a href="#">mission</a> </li> <li><a href="#">contact</a> </li> </ul> <!--/.dropdown-menu --> </li> <li><a href="#">projects</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">media <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">audio</a> </li> <li><a href="#">video</a> </li> <li><a href="#">photos</a> </li> <li><a href="#">enter download code</a> </li> </ul> <!--/.dropdown-menu --> </li> <li><a href="#">donate</a> </li> </ul> <!-- /ul.navbar-center --> </div> <!--/.my-collapse collapse --> <div class="social-links clearfix"> <a href="#"> <img src="http://placehold.it/64x64/ffffff/000000&text=x"> </a> <a href="#"> <img src="http://placehold.it/64x64/ffffff/000000&text=x"> </a> <a href="#"> <img src="http://placehold.it/64x64/ffffff/000000&text=x"> </a> </div> <!--/.social-links --> </div> <!--/.container --> </nav> <!-- /nav.navbar-center --> css
nav.navbar-center.navbar-inverse { background: #000 } .navbar-center .social-links { width: 32px; height: 32px; float: left; padding-right: 5px; } nav.navbar-center .social-links { float: left; padding: 27px 0 10px 0; } nav.navbar-center img { max-width: 100%; height: auto; } nav.navbar-center .logo { float: left; padding: 10px 20px 10px 0; } .navbar-inverse button.navbar-toggle { margin: 0; border: none; border-radius: 0; padding: 10px; width: 50px; height: 80px; } .navbar-inverse button.navbar-toggle .icon-bar { width: 100%; display: block; margin: 5px 0; height: 3px; border-radius: 0; background:#fff; border:0px; padding: 0; } @media (max-width:767px) { nav.navbar-center .my-collapse { clear: both; padding: 10px 0; } } @media (min-width:768px) { nav.navbar-center img { width: 100%; height: auto; } nav.navbar-center .container { text-align: center; max-width: 980px; } #navbar.my-collapse.collapse { visibility: visible; display: inline-block; } ul.navbar-center > li > { padding: 0 15px; line-height: 80px; } nav.navbar-center .logo { padding: 10px 0 10px 0; text-align: left; float: left; } nav.navbar-center .social-links { line-height: 80px; float: right; padding: 0; } }
Comments
Post a Comment