Hey there I wanted to create a white background for my menu on the right and title on left just like on this website http://weblendit.co.uk/, that also stays at the top when you scroll down (doesn't necessarily have to change its size like this one)
My header also consists of a big picture after the nav and h1, when I set a background color it will only be behind the text, but I want it to be fullsize.
I also tried setting a width and height for .fixed but then the nav floats to the left and the h1 disappears?
.fixed{
position: fixed;
top: 0;
background-color: white;
}
h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}
nav{
float: right;
padding-right: 12%;
padding-top: 3%;
width: auto;
right: 0;
}
#menu ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
#menu li{
margin: 0 5%;
float: left;
}
#menu li a {
text-decoration: none;
color: #666666;
font-size: 25px;
font-weight: bold;
display: block;
float: left;
}
<header class="header">
<h1 class="fixed">My page</h1>
<nav class="fixed" id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
....
It is better to fix the container surrounding the header elements, rather that every element in it. Then you don't need the fixed class anymore.
<header class="header">
<h1>My page</h1>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
.header {
position: fixed;
background-color: red;
top: 0px;
left: 0px;
width: 100%;
}
Related
I'm really new to this whole CSS and HTML and i'm trying to make a simple navbar with what I have learned.
The problem is, I have the navbar items centered and I was happy with it. Then I decided to add this hover option so the background color of each item would change when hovering on it.
The issue is I cannot change the height or alignment of the boxes.
weird box
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav ul:hover {
background: blue;
height: 20px important;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
}
<nav id="header">
<ul>
<li>Home</li>
</ul>
<ul>
<li>Contact Info</li>
</ul>
<ul>
<li>NUKE</li>
</ul>
</nav>
The hover effect should be added to the list-items (<li>). To get more space, you can add padding instead of changing the height.
Also, only add one <ul> instead of 3.
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav li:hover{
background: blue;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
padding: 20px;
}
<nav id="header">
<ul>
<li>Home</li>
<li>Contact Info</li>
<li>NUKE</li>
</ul>
</nav>
I've recently had a problem, where I want to keep all my content within a parent container, but I want the navigation background to be 100% of the width of the page. The methods I've tried have worked in terms of getting the navigation to be 100% width of the page, but now the ul inside isn't affected by the container, which is what I originally wanted.
I got it to work by using another container div inside the navigation, but I feel like this is a very makeshift method.
Any suggestions on how to get the parent container to affect the ul inside the nav?
HTML:
<div class="container">
<nav class="menu">
<div class="container">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</li>
</ul>
</div>
</nav>
</div>
CSS:
.container {
margin: 0 auto;
width: 1200px;
}
.menu {
left: 0;
right: 0;
height: 80px;
position: fixed;
background-color: rgb(33, 33, 33);
}
.menu ul {
padding: 0;
margin: 0;
color: #fff;
list-style: none;
font-weight: bold;
height: 80px;
float: right;
}
.menu ul li {
display: inline-block;
padding-right: 50px;
}
You can use :before or :after pseudo selector for creating background effect that looks like having width equal to the width of the page.
body {
overflow: hidden;
width: 100%;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.menu {
height: 80px;
position: relative;
}
.menu:before {
background-color: rgb(33, 33, 33);
position: absolute;
right: -9999px;
left: -9999px;
content: '';
z-index: -1;
bottom: 0;
top: 0;
}
.menu ul {
padding: 0;
margin: 0;
color: #fff;
list-style: none;
font-weight: bold;
float: right;
}
.menu ul li {
display: inline-block;
padding-right: 50px;
}
.menu ul li a {
color: #fff;
}
<div class="container">
<nav class="menu">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</li>
</ul>
</nav>
</div>
I'm new to HTML/CSS. I'm practicing by creating a mock portfolio website.
I'm creating a nav bar with the logo in the middle. I want to "vertically center" the logo, if that makes sense. I added a class to that li to try to add margin or padding to the top but it's not working.
I'm working on it on CodePen: http://codepen.io/levane/pen/KdxgmR?editors=110
This is my HTML so far:
<body>
<section id=top>
<img src="http://creatifydesign.com/wp-content/uploads/2015/11/photo-1429051883746-afd9d56fbdaf.jpeg" class="bckg-image"/>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li class="logo"><img src="http://creatifydesign.com/wp-content/uploads/2015/09/icon57.png"/></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</section>
</body>
This is my CSS:
body {
margin: -1em 0;
position: relative;
}
#top {
background-color: black;
height: 53.125em;
}
.bckg-image {
position: absolute;
height: 53.125em;
opacity: 0.5;
}
nav {
height: 6.5em;
border-bottom: 1px solid rgba(255,255,255, 0.4);
position: relative;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav li {
display: inline;
margin: 0em 1.5em;
color: white;
text-transform: uppercase;
font-family: Lato, Arial;
letter-spacing: 0.1em;
}
Please let me know if you can spot what I'm doing wrong and feel free to critique anything else.
Thanks!
Apply this CSS
.logo{
vertical-align: middle;
display: inline-block;
margin-top: .5em
}
CODEPEN DEMO
I know there are a lot of other answers out there, but I don't know if Im just doing something wrong, but they aren't working.
Basically, I have a "logo" (it's just my name) in a div("name") on the left hand side of a container div("header"). I also have my navbar links on the right of the name div, which are in the "nav" div.
The issue is that the nav div is actually floating to the top of the header div, while the name div is perfectly centered. A picture:
This is my HTML file:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Toby Caulk</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
</html>
And the CSS:
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
float: left;
font-size: 20px;
margin-left: 20px;
}
#nav {
float: left;
}
nav ul li {
display: inline-block;
}
nav ul {
padding: 0;
list-style-type: none;
}
nav li {
font-weight: 150;
font-size: 24px;
}
What I want is for the nav div to be centered vertically inside of the header div, just like the name div is doing. How do I do this?
See comments and the properties I added to #name
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
font-size: 20px;
margin-left: 20px;
display: inline-block; /* Ensures that #name and #name aligns side by side */
line-height: 100%; /* Makes to ensure vertical centering */
vertical-align: middle; /* Makes sure it's centered vertically */
}
#nav {
display: inline-block;
}
nav li {
font-weight: 150;
font-size: 24px;
display: inline-block; /* You can align them without using float */
}
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
I am trying to capture a layout that I have seen a few different places. The layout has a fixed header with an image centered, and then a horizontal UL that is split around the logo. Attached is the image that I feel represents this.
I need a suggestion to achieve splitting the UL around logo. Right now the UL is always under and not split.
http://jsfiddle.net/jgac8/1/
Here is some markup that I have been attempting:
HTML
<header>
<h1 id="logo"></h1>
<nav>
<ul>
<li>about</li>
<li>services</li>
<li>location</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(../img/PP_Logo_Vert_White.png) center no-repeat;
}
nav {
padding: 0px;
margin: 0px;
font-size:16px;
font-weight: 100;
clear:left;
}
nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 50px;
}
You might have to do a bit of tweaking but I believe it is what you want.
HTML
<header>
<h1 id="logo"></h1>
<nav id="left">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
<nav id="right">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(http://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png) center no-repeat;
}
#left{position:absolute; left:10%; top:5px; list-style:none}
#right{position:absolute; right:10%; top:5px; list-style:none}
li{list-style:none}
There are many ways to go about this. Depending on how dynamic your site will be. If you are creating it with static html and css I would simply create a container, put three divs inside the container splitting it up how you want. In the first and third div create two separate menus. In the center put the logo. Something like the code below. At a certain width you can create some css media queries to bring it down and make it one navigation.
The very basic idea:
Example of html:
<div class="container">
<div class="left-nav">
</div>
<div class="logo">
</div>
<div class="right-nav">
</div>
</div>
Example CSS:
.container {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.left-nav {
float: left;
width: 400px;
}
.right-nav {
float: left;
width: 400px;
}
.logo {
float: left;
width: 200px;
}