Develop Reference

How to add navigation bar on a image

First day of me learning to code in html and css.
I'm trying to add navigation bar on a image but i am unable to do so.
The background image i am trying to add is not displaying too.
Can anyone help me out here.
.header {
background-image: url("vent1.jpg");
}
.nav {
overflow: hidden;
float: left;
background-color: #333;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-bar {
list-style-type: none;
text-align: center;
}
.ul {
display: inline-block;
padding: 8px;
margin: 0px;
color: white;
}
<div class="header">
<div class="nav">
<div class="menu-bar">
<ul>
<li> Home</li>
<li>
About Us</li>
<li>
Portfolio</li>
<li>
Contact</li>
</ul>
</div>
</div>
</div>

header class should have these properties.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("vent1.jpg");
background-repeat: no-repeat;
background-size:cover;
}

CSS deactivating href links with unrelated line, "left: 0;"

Two divs on my homepage contain nav elements: the .header-nav and the .visualizer.bars nav. For some reason my .header-nav links weren't active, and I've narrowed down the culprit to a single line in my css file: .bars {left:0;}.
When I remove this line, the links in my .header-nav work fine. I have no idea what's linking these two div elements, but I need that line in place for the visualizer effect to work properly.
Everything I've seen in my research indicates a problem with the JavaScript, but unlinking the JS doesn't affect the hrefs so I don't think that's it.
What can I do to keep all links active with the correct styling?
https://jsfiddle.net/vespertron/Leebz05q/
HTML
<header>
<div class="header-left">
<h3>This Is A Site </h3>
<nav class="header-nav">
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="header-right">
<form class="login">
<fieldset>
<input type="text" name="username" tabindex="1" placeholder="Username">
</fieldset>
<fieldset>
<input type="text" name="password" tabindex="2" placeholder="Password">
</fieldset>
<fieldset>
<button type="submit" tabindex="3" value="submit">Login</button>
</fieldset>
</form>
</div>
</header>
<main>
<p class="blurb">stuff that makes me sound like a badass</p>
<div class="visualizer">
<p>What am I up to?</p>
<nav>
<ul class="bars">
<div class="bar">
Link 1
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 2
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 3
<li>
<a href="http://www.dappergrind.com" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 4
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 5
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
</ul>
</nav>
</div>
</main>
<footer>
<span>Copyright © 2018, Entity</span><br />
Privacy
</footer>
<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
var showWidth = 1;
if(showWidth == 1) {
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
});
});
}
</script>
CSS
html,
body {
background-color: #22201d;
background-image: url(../img/leather.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #b7b7b6;
font-family: 'Playfair Display SC', serif;
}
a {
color: #686766;
text-decoration: none;
}
a:hover {
color: #b7b7b6;
}
a:after {
color: #141311;
}
li {
list-style: none;
}
header {
height: 100px;
letter-spacing: 1em;
}
.header-left {
float: left;
}
form {
float: right;
}
fieldset {
border: 0 none;
}
input[type=text] {
float: right;
color: #686766;
}
.header-nav ul {
clear: both;
}
.header-nav li {
float: left;
}
main p.blurb {
font-size: 2rem;
text-align: center;
letter-spacing: 1em;
}
.visualizer {
text-align: center;
font-weight: bold;
letter-spacing: .5em;
}
.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 75px;
left: 0;
margin: 10px auto;
text-align: center;
overflow: hidden;
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 15%;
height: 50%;
min-height: 30px;
background: #800000;
opacity: 0.7;
-moz-opacity: 70%;
-webkit-opacity: 70%;
-webkit-transition: height 0.5s ease-out;
color: #141311;
padding-top: 10px;
font-family: 'Anton', sans-serif;
font-size: 1.75em;
writing-mode: vertical-lr;
text-orientation: upright;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
transition: 0.75s ease-out;
box-shadow: 0px -3px 4px #141311;
}
.bar:hover {
opacity: 1;
-moz-opacity: 100%;
-webkit-opacity: 100%;
color: #b7b7b6;
transition: .25s ease-in-out;
}
.bar:after {
color: #686766;
}
.link-spanner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
footer {
position: fixed;
height: 75px;
width: 100%;
bottom: 0;
text-align: center;
letter-spacing: .2em;
}

Collapsable sidebar / navigation menu

I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>

please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo

Fix nav bar to adjust when user zooms in

I am having trouble making my nav bar adjust when the user has a zoomed in browser.
For example, at zoom 100%, the nav bar looks as it should, however, if the user were to have their screen set at zoom 150%, half of my nav bar gets cut off.
Here is my HTML/CSS:
https://jsfiddle.net/ghy09hvL/3/
HTML:
<header>
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
</header>
CSS:
#media (min-width:1100px){
header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 30px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
position: absolute;
bottom: 50px;
}
}
Thanks so much in advance! Appreciate it!

If you have the viewport tag in your head, try using vw and vh for your fonts.
viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
CSS something like this
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 5vh;
font-size: 5vh;
text-decoration: none;
letter-spacing: 2px;
}

I figured it out.
I just had to change around the position: relative and position: absolute to be consistent.
All is good, thanks everyone.

Use the #media rule to fix this.
It can also make your page mobile friendly.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
EDIT: I would change your fixed positioning to absolute to avoid this. But if you're dead set on the fixed position, you could update your media query to allow overflow-y: scroll. That way instead of getting cut off the user can scroll the nav if they are zoomed in too far.
You should also remove all your divs, unless you have a good reason for them other than to transition. Here's what I did:
header {
display: block;
position: absolute;
top: 0;
left: 0;
width: 260px;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header nav {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 30px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
width:50%;
height: 30px;
position: relative;
}
header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s;
}
header nav ul li a:hover {
color: #8AE6B8;
padding-left: 20%;
}
header nav ul li a:active {
color: #CC99FF;
}
header .footer {
position: absolute;
bottom: 50px;
}
html:
<header>
<div id="menu_icon"></div>
<nav>
<ul>
<li>About</li>
<li>Resume</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Map Gallery</li>
<li>Thesis</li>
<li>Contact</li>
</ul>
</nav>
<!--end sidebar-->
</header>

Adding multiple pages with a single HTML document

I am attempting to implement a multi-page site with a single HTML document.
I want to display 'home', 'about', 'projects', and 'contact' when a user clicks on a certain link in my sidebar.
I have the following code written:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Home</p>
</div>
<div class="footer">
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>About</p>
</div>
<div class="footer">
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Projects</p>
</div>
<div class="footer">
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Contact</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
css/main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:relative;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
line-height: 2;
color: white;
display:flex; align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
margin-top: -80px; /* Header height */
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
}
.content h1 {
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position:absolute;
}
.footer a img {
position: relative;
top: -5px;
}
but when I click on an option, it gives an expected problem: the 'page' that should be hidden isn't being hidden and only part of the requested page is being shown.
The jsfiddle found here shows my problem.
Why isn't this working? The javascript in the head is meant to find the difference between all the pages and the page requested, show the requested page and hide the rest.
Thanks in advance,
erip

See the fiddle
Replace
for (hidden in hide_these) {
document.getElementById(hidden).style.display = 'none';
}
with
for (hidden in hide_these) {
document.getElementById(hide_these[hidden]).style.display = 'none';
}
The problem with your code was that document.getElementById() was returning null because the values for the variable hidden was actually 0,1,2 etc.
you actually had to get the ids from the array hide_these
UPDATE
Add this in your CSS
The messing up of the background image is because you are missing the below given css. add them to solve the issue..
#about, #projects, #contact {
width: 100%;
height:100%;
}