i have seen navigation this, , absolutely love it. how go having navigation, have template of horizontal navigation use now, no matter how tweaking do, isn't coming close design.
i logo placed, can me tweak code?
body { font-family: 'catamaran', sans-serif; margin: 0 !important; padding: 0 !important; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; padding-right: 50px; background-color: #f3f3f3; } li { float: right; } li { display: block; color: #666; padding: 60px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #f3f3f3; color: #cc293f; } li a.active { color: #cc293f; background-color: #f3f3f3; }<html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href='https://fonts.googleapis.com/css?family=catamaran:600' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <title>sharpturn network v2</title> <header> </header> <ul> <img src="imgur.com/s17tggx"> <li><a class="active" href="#home">upload</a> </li> <li><a href="#news">support</a> </li> <li><a href="#contact">faqs</a> </li> <li><a href="#about">home</a> </li> </ul> </body> </html>
this involves using float. solution this:
nav { background: black; height: 60px; width: 100%; } #left-nav { float: left; color: white; } #right-nav { float: right; } #faqs { color: green; } ul { list-style-type: none; } li { display: inline; padding-right: 20px; line-height: 20px; top: -10px; text-transform: uppercase; } { color: white; text-decoration: none; }<nav> <div id='left-nav'> <img src='http://lorempixel.com/image_output/technics-q-g-60-40-3.jpg' alt='my image' />hyip templates </div> <div id='right-nav'> <ul> <li><a href='uploads.html'>upload</a> </li> <li><a href='support.html'>support</a> </li> <li id='faqs'><a href='faqs.html'>faqs</a> </li> <li><a href='contact.html'>contact</a> </li> </ul> </div> </nav>as can see above, instead of using divs navigation, can use html5 semantic nav tag. break down sections, 1 left side , other right. assign each of these divs float property.
in order provide background color nav element, have specify height , width property.
by default li elements block elements. display them on same line , remove line breaks, set display property inline. in order vertically center these list elements, use both line-height , top properties.
an easier solution use bootstrap's navbar classes.
we can replicate black navbar .navbar-inverse class. can replicate left nav , right nav respectively .nav-pull-left , .nav-pull-right classes well.
Comments
Post a Comment