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
Related
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'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;
}
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
Fixed div is getting down when I give margin-top to the div below it...why?
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
you need to add top:0 to your .header_bg, see more about position
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black;
top:0
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>