html5 - Navbar Menu Trouble shoot -
so wanted create fixed nav bar on top of page. instead of creating nav bar ordered list, used following approach:
<header> <div class="nav"> <img src="images/logo_ab.png" alt="aurinbiotech logo"/> <a href="index.html">home</a> <a href="#">about</a> <a href="#">team</a> <a href="#">science</a> <a href="#">need</a> <a href="#">pipeline</a> <a href="#">contact</a> </div> </header>
css:
header .nav { margin-top:100px; width:100%; height:10%; text-align:center; padding-top:2%; margin:0 auto; position:fixed; top:0; } header .nav { font-size: 2em; padding-left: 15px; padding-right: 15px; color:rgb(1, 1, 1); text-decoration: none; font-family: 'bebas'; } header .nav a:hover { color:white; background-color: #404040; border-radius:5px; padding:0 auto; } header .nav a:active{ background-color: #404040; border-radius:5px; text-decoration:overline; } header .nav img { width:260px; height:65px; padding-right:4em; }
the reason used approach because wanted use logo image next nav bar align in same line. problem need add sub-menus under science , pipeline heading. since didn't use ul or li, how can add sub-menus under heading.
or, can tell me other way create nav bar shows logo well. logo , menus on same line.
great in advance.
use normal ul li
structure.
if set height , line-height of top level li
tags equal height of image align text center of image.
Comments
Post a Comment