I'm having trouble vertically aligning the links and the logo inside the list any idea what i can to fix it?
Here is the code in codepen.
http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100
<body>
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
}
Add padding:0 to nav ul #logo
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
padding:0;
}
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
a simple way to center the navbar and logo in the center of navbar is to set a height to navbar and give the same value as line-height to li
like
nav {
height: 70px;
}
ul.cf {
line-height: 70px;
}
Related
I want my nav bar to have the navigation buttons on the left & my signup/login to the right. I've managed to have a main nav bar, and a separated navbar for the login/signup, but that messes with my code.
I've tried to do something with the ':last-child' but it doesn't seem to work...
.nav-wrapper ul {
float: left;
padding-left: 50px;
}
.nav-wrapper ul li {
display: inline-block;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li:last-child {
margin-right: 18px;
float: right;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<nav class="nav-bar">
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
"logo"
</div>
<div class="nav-wrapper">
<ul class="list">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
in my opinion you can have a header element (the topbar), with two nav inside, each with its own alignment
<header class="topbar">
<div class="logo">
My logo
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
</ul>
</nav>
<nav class="user">
<ul>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</nav>
</header>
and then
header.topbar {
position: relative;
display: block;
float: left;
width: 100%;
}
.logo {
position: relative;
display: block;
float: left;
}
nav.navigation {
position: relative;
display: block;
float: left;
}
nav.user {
position: relative;
display: block;
float: right;
}
nav ul {
position: relative;
display: block;
float: left;
list-style: none;
}
nav ul li {
position: relative;
display: block;
float: left;
margin: 0px 12px;
}
You can use flexbox on your ul element and move its last child element to the right by applying margin-left: auto to it (no floats needed in this case):
.nav-wrapper ul {
display: flex;
padding-left: 50px;
list-style: none;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li:last-child {
margin-right: 18px;
margin-left: auto;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<nav class="nav-bar">
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
"logo"
</div>
<div class="nav-wrapper">
<ul class="list">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
<li>Log In</li>
<li>Sign Up</li>'
</ul>
</div>
</nav>
Regarding your code, it will work if you remove float: left; from .nav-wrapper ul.
In my opinion, it is more intuitive to use CSS grid, and divide your ul into two logical units (main ul for the left side, and secondary ul for the right side):
.nav-wrapper {
display: grid;
grid-template-columns: 1fr max-content;
}
.nav-wrapper ul.list {
display: flex;
list-style-type: none;
padding: 0;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<div class="nav-wrapper">
<ul class="list list-main">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
</ul>
<ul class="list list-secondary">
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
I want something like this:
+-------------------------------------------------------------------+
| |
| LOGO Search_box... ITEM_1 ITEM_2 ITEM_3 |
| |
+-------------------------------------------------------------------+
The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.
I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/
Note: I did not implement the input text yet.
CSS:
header{
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a{
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 10%;
}
HTML:
<header>
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
Why not use flexbox?
header {
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
header img {
width: 50%;
}
header .left {
width: 30%;
}
header .right {
width: 70%;
display: flex;
justify-content: flex-end;
}
header ul {
list-style-type: none;
padding: 0.5vw;
overflow: hidden;
display: flex;
}
header li a {
color: #262626;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header input {
height: 30px;
align-self: center;
}
<header>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<input type="search">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
<header>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).
You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.
Before:
header img {
width: 10%;
}
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
After:
header img {
width: 100px;
}
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
Note: Please view the demo in full screen to see the change.
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 100px;
}
<header>
<nav>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I have kept the li under ul, instead of div and changed the image size to pixels.
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
.left ul{
padding:0;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 3vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 80px;
}
<header>
<nav>
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I am using the following code in my header to display my logo and my navigation. I vertically centered my text with line-height: 90px; but when I try to give my logo vertical-align: middle; it doesn't seem to work. What am I doing wrong?
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
}
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
<header>
<img src="images/logo.png" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Flexbox can do that:
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
width: 59px;
height: 32px;
}
nav {} nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
nav ul li a {
color: white;
}
<header>
<img src="http://www.fillmurray.com/59/32" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}
You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block