i have fixed-top navigation bar content inside needs center aligned vertically. additionally, i'm using bootstrap me design page. navigation bar has 2 major content blocks. 1 image nav header , 1 has container of links.
the container wrapped around 2 not have vertical padding , has margins content going underneath it.
<!--navigation bar--> <nav class="navbar navbar-default navbar-fixed-top navbar-wrap"> <div class="container-fluid"> <div class="navbar-header"> <img src="img/logo.png" /> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">who i?</a></li> <li><a href="#projects">projects</a></li> <li><a href="#contact">contact</a></li> </ul> </div> </nav> what have tried doing set .container-fluid>ul relative container , set margin auto. not want have fixed margin or padding since want site scale on mobile devices (hence why i'm using bootstrap).
i amateur developer , trying site off ground can showcase projects school , side gigs.
thanks in advanced, if see css. can edit in too.
.navbar-wrap { padding: 0; background-color: #77b69c; } .nav { padding-right: 15px; } .navbar-right { margin-right: 0; } .container-fluid>ul { position: relative; height: 100%; margin: auto; } .navbar-default .navbar-nav>li>a { color: #ecf0f1; border-radius: 5px; transition: background-color 0.5s; } .navbar-default .navbar-nav>li>a:hover { color: #171f26; background-color: #fff; }
there multiple ways can handle depending on makes sense.
- 1) use text , adjust css in first navbar example.
- 2) can constrain image navbars
defaultheight in example 2. - 3) , can adjust height , line height in example 3 image exceeds height of navbar.
** also, if using preprocessor (less or sass) can adjust height , rest handled.
i inserted html navbar collapses (navbar docs)under 768px mobile configuration (unsure if omission meant or not).
(if use 2nd or 3rd option remove margin-top class navbar-wrap* nav fixed top again.)
@import url(https://fonts.googleapis.com/css?family=hind+vadodara); /**text css**/ .navbar.navbar-wrap { background: #77b69c; } .navbar a.navbar-brand, .navbar a.navbar-brand:hover, .navbar a.navbar-brand:focus { font-family: 'hind vadodara', sans-serif; font-size: 30px; color: #000; letter-spacing: 5px; } .navbar .navbar-brand span.lname { color: #fff; } .navbar.navbar-wrap .navbar-nav > li > { font-family: 'hind vadodara', sans-serif; color: #ecf0f1; border-radius: 5px; transition: background-color 0.5s; } .navbar.navbar-wrap .navbar-nav > li > a:hover { color: #171f26; background-color: #fff; } @media (min-width: 768px) { .navbar.navbar-wrap .navbar-right { margin-right: 15px; } .navbar.navbar-wrap .navbar-brand { margin-left: 15px; } } /**img css**/ .navbar.navbar-wrap2 .navbar-brand { padding: 0; margin: 0; } .navbar.navbar-wrap2 .navbar-brand img { height: 50px; width: 300px; padding: 0; margin: 0; left: 0; } .navbar.navbar-wrap2 { background: #77b69c; margin-top: 200px; } .navbar.navbar-wrap2 .navbar-nav > li > { font-family: 'hind vadodara', sans-serif; color: #ecf0f1; border-radius: 5px; transition: background-color 0.5s; } .navbar.navbar-wrap2 .navbar-nav > li > a:hover { color: #171f26; background-color: #fff; } .navbar.navbar-wrap2 .navbar-brand img { margin-left: 15px; } @media (min-width: 768px) { .navbar.navbar-wrap2 .navbar-right { margin-right: 15px; } } /**large img css**/ .navbar.navbar-wrap3 .navbar-brand { padding: 0; margin: 0; } .navbar.navbar-wrap3 .navbar-brand img { height: 75px; width: 300px; padding: 0; margin: 0; left: 0; } .navbar.navbar-wrap3 { background: #77b69c; margin-top: 400px; } .navbar.navbar-wrap3 .navbar-header { height: 75px; } .navbar.navbar-wrap3 .navbar-toggle { margin-top: 20px; } .navbar.navbar-wrap3 .navbar-nav > li > { font-family: 'hind vadodara', sans-serif; color: #ecf0f1; border-radius: 5px; transition: background-color 0.5s; } .navbar.navbar-wrap3 .navbar-nav > li > a:hover { color: #171f26; background-color: #fff; } .navbar.navbar-wrap3 .navbar-brand img { margin-left: 15px; } @media (min-width: 768px) { .navbar.navbar-wrap3 .navbar-right { margin-right: 15px; } .navbar.navbar-wrap3 .navbar-nav > li > { line-height: 45px; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-wrap navbar-fixed-top"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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="#"><span class="fname">james</span> <span class="lname">wong</span></a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-nav"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">who i?</a> </li> <li><a href="#projects">projects</a> </li> <li><a href="#contact">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <hr> <nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav2" aria-expanded="false"> <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="#"> <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmlogowhitebackground_rgb.png" /> </a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-nav2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">who i?</a> </li> <li><a href="#projects">projects</a> </li> <li><a href="#contact">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <hr> <nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav3" aria-expanded="false"> <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="#"> <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmlogowhitebackground_rgb.png" /> </a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-nav3"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">who i?</a> </li> <li><a href="#projects">projects</a> </li> <li><a href="#contact">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
Comments
Post a Comment