I would like a logo to appaear in the center of the navigation bar. At the moment i've made it really small just to ensure I can see it for now but will sort the size out afterwards.
Here is a photoshop design of how I want it to look:
https://gyazo.com/c1b0d25c4fe94a33edf3937576324229
Here is how it looks currently:
https://gyazo.com/4432c9c4874a082a9c4a4c5eb6d7af12
Any help would be greatly appreciated.
HTML:
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="assets/Headerlogo1.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
</div> <!-- Page -->
</body>
CSS:
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
/*width: 100px;
height: 400px;*/
align-content: center;
margin-top: -30px;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
Good morning!
Usually you want to control the nav ul and nav ul li elements appearance together without using floats and heavy padding. take a look at my revisions here. For the logo, you can just put it into an li element:
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 140px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
}
nav {
}
nav ul{
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #FFF;
}
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="chesters.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
</div> <!-- Page -->
</body>
Try this revision.
Add this to your CSS:
nav ul {
text-align: center;
}
The li elements shouldn't be affected but the image will be centered.
Add container class before nav and set max-width and margin: 0 auto
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Menu</li>
<li>Takeaway Burritos</li>
<li><img class="header-image" src="assets/Headerlogo1.png"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
<div id="Page">
</div>
<!-- Page -->
</body>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 140px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
}
.container {
max-width: 1282px;
margin: 0 auto;
}
nav {}
nav ul {
text-align: center;
display: table;
}
nav li {
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
padding-right: 20px;
}
nav li a:hover {
color: #FFF;
}
Related
This is my code (im a total noob in html) this code gives me whitespace on top and on the left of my navigation... do you guys have any idea of what im doing wrong?
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Added html
this is CSS. Add this
body{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
background-color: #e8e4e5;
}
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
But you can set to nav div position fixed: it will help when you get scroll in content, but nav div all time will in top.
body{
padding: 0;
margin: 0;
}
.content{
margin-top: 60px;
height: 150vh;
background-color: #d2d29d;
}
div.nav {
position: fixed;
height: 60px;
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
<div class="content">
Some text
</div>
Since you're using position:fixed; you can change you css to the following, which will force the navbar to be in the top-left corner of your page
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
Ofcourse, there's many more ways. The above CSS will result in your whitespace being removed
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Hope this helps!
I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.
#wrapper{
background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
}
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
Make the li elements inline-block, and add box-sizing:border-box:
CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
I don't understand your question. what did you want?.But Is this you want?
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
</header>
</div>
i have a project at school where im trying to make a flashgames website but im stuck with a problem.I want the picture be bigger than the gray box.The picture how i want it : https://prntscr.com/frvzyy
My html Code:
*{
margin: 0px;
background-color:darkred;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 30%;
padding-right: 30%;
overflow: hidden;
background-color: gray;
}
li {
float: left;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
display: block;
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="src/flash%20games%20logo.png" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
<h1>Games</h1>
<p>content bla bla</p>
</html>
You need to make some changes to achieve this.
*{
margin: 0px;
background-color:darkred;
}
.nav{
height: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/*padding-left: 30%;
padding-right: 30%;*/
/*overflow: hidden;*/
background-color: gray;
height: 48px;
}
li {
/*float: left;*/
display: inline-block;
vertical-align: top;
margin: 0 -2px;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
/*display: block;*/
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
#logo img{
display: block;
}
li a:hover {
background-color: black;
}
}
p{font-family:Tahoma;}
<div class="nav">
<ul>
<li>Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/94/77/f9/9477f98e6d5154911c05467c4acb24c5.jpg" style="width:250px;"></li>
<li>Categories</li>
<li>About us</li>
</ul>
</div>
<h1>Games</h1>
<p>content bla bla</p>
I hope it will helps you :)
Is it possible to overlap images in the navigation bar, without getting the background color and some stuffs? The image or the logo itself shouldn't have any background-color (that is inherited) and should have overlapped the navigation bar. I'm looking for an output like this.
This is the CodePen link, try it out
HTML Codes:
<nav>
<ul>
<li>
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
</li>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
CSS Codes:
* {
margin: 0px;
}
nav {
width: 100%;
height: 100%;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
#logo {
float:left;
z-index: 1000;
}
I have made an edit to your code to get the results
* {
margin: 0px;
}
nav {
width: 100%;
height: 70px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
position: relative;/*change here*/
}
ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;/*change here*/
right: -25%;/*change here*/
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.line {
width: 100%;
height: 50px;
border-bottom: 1px solid #111;
}
#logo {
float:left;
z-index: 1000;
position: absolute;/*change here*/
}
<!--move logo outside nav-->
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
<nav>
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
<div class="line"></div>
Here's another variation, not using absolute positioning:
HTML:
<div id="header_container">
<div id="header">
<div class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0px;
}
#header_container {
width: 100%;
height: 100px;
background-color: #343F64;
}
#header {
margin: 0 auto;
width: 1200px;
}
.nav {
float: left;
margin-top: -100px;
margin-left: 350px;
height: 100px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.logo {
float:left;
z-index: 1000;
}
I have a header on my website, with a list in it. The list is aligned properly on 100% size, but when I ctrl-scroll to expand, the text in the list goes out of the header area.
HTML
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 125%;
height: 4.5%;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I want the list text to remain inside the header at all times.
EDIT: If I remove the height, since there is a position:fixed; the other containers will get overlapped by the header on zooming.
In your .header class, remove the height attribute - the browser will set the height of that div based on the content inside it (in this case, your menu items).
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
height: 2.5em;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
If you want to be able to scale everything relatively when you zoom you should use em units instead of percentages.