I'm working on a nav bar and the positioning of the elements seem to be off. I have been trying to find the problem but the code looks fine to me
The issues
Navbar links seem to overflow when there is no need for it.
navbar-expand-md isn't working. And so when I resize the page it looks completely wrong.
Any help is greatly appreciated.
*{
margin: 0;
padding: 0;
line-height: 1;
}
body {
margin: 0;
font-family: sans-serif;
background: #FFFFFF;
-webkit-font-smoothing: antialiased;
overflow: hidden;
overflow-x: hidden;
}
nav {
margin: 0 0 0 0;
font-family: 'Lato', Sans-serif;
font-size: 100%;
width: 100%;
}
.navbar {
margin: 0;
padding-top: 1.5em;
padding-bottom: 1.5em;
padding-left: 6em;
padding-right: 6em;
border: none;
list-style-type: none;
background-color: #000;
}
.logo {
float: left;
}
.navbar-brand {
padding-left: 6px;
text-decoration: none;
color: #fff;
background-color: #000;
font-size: 22px;
font-weight: 400;
margin: 0;
display: inline;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
right: 6em !important;
text-decoration: none;
color: #fff;
background-color: #000;
font-size: 18px;
font-weight: 400;
right: 6em;
}
.nav-link {
padding-left: 20px;
padding-right: 20px;
}
.navs {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<link rel="icon" href="9h.png">
<title>9haus Studios</title>
<link href="graphic-design.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="logo"><img src="9haus-logo-white.png" alt="9haus logo" width="63px" height="19px"></a>
<a class="navbar-brand" href="graphic-design.html">Graphic design</a>
<div class="navs">
<ul class="navbar-brand">
<li class="active"><a class="nav-link" href="graphic-design.html">Work</a></li>
<li><a class="nav-link" href="graphic-studio.html">Studio</a></li>
<li><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Your issue is nav {width:100%} it should be nav {width:auto}.
Related
I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.
Here's my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: white;
display: block;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul{
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: var(--primary-color);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
All help would be appreciated!
Set nav as flex container:
body {
background: black;
margin: 0;
color: white;
}
nav {
display: flex;
align-items: center;
background-color: white;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
}
.navbar ul{
display: flex;
list-style: none;
/*margin: 0px 25px 0px 90px;*/
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: black;
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
<style>
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: rgb(255, 238, 0);
display: block;
display: flex;
align-items: center;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</nav>
</body>
</html>
Easiest way to create a navbar. Have a look
You need to adjust Width of the images and use this property to align image to left float:left
body,
div {
margin: 0;
border: 0 none;
padding: 0;
background-color: rgb(65, 63, 63);
}
.md {
background-color: black;
padding: 20px;
}
a {
color: white;
text-decoration: none;
padding: 15px;
}
a:hover {
background-color: rgb(224, 224, 224);
color: black;
}
img{
width: 40px;
height: 30px;
float: left;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
<div class="md">
HOME
BAND
TOUR
</div>
</body>
</html>
I am trying to make it so the image is right behind the navbar, where the navbar is on top of the image, although the image must start from the top of the page just like the nav bar, and I don't know why it's showing this white line in between them.
This is an angular 6 website (not that it really matters in this case), I am using bootstrap. (I know this is not very angularish to do putting all this code in one style sheet, I am just fuzzing with it so then I can refactor).
I tried to fuzz with positioning and z-index and margin, but nothing works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor02"
aria-controls="navbarColor02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="text"
placeholder="Search"
/>
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- -->
<!-- main app root -->
<app-root></app-root>
<!-- -->
<!-- Dependencies -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<!-- -->
</body>
</html>
And the stylesheet:
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
There's a few problems with your code. First, you are importing Bootstrap3 in your link tag and your script tags, but you are using Bootstrap4 syntax. This is causing very little of your CSS to actually render properly.
Bootstrap3 was known to have issues with margin-collapsing, which you can read more about at MDN or CSS-Tricks. For the most part, Bootstrap4 solved most of these issues. I've changed your dependencies to the Bootstrap4 dependencies and added an orange div to show you how it looks without the collapsing margins.
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<div style="background-color: orange; width: 100%; height: 500px;">
</div>
<!-- -->
<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- -->
</body>
</html>
Remover margin-bottom:0px;
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
}
Before anything heres the html and css
HTML:
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li> Page 1 </li>
<li> Page 2 </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
CSS:
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
SO as u can see the navigation bar uses an inline unordered list and so to put a space inbetween the anchor texts ive used two nbsp entities on either side of the anchor text but when the hover state is active and the underline is applied it underlines the nbsp as well
NBSP Underline
Any help would be much appreciated thank you
You can remove the , and replace with CSS padding on the <a> tags:
#navbar a {
padding: 0 .5em;
}
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
padding: 0 .5em; /* Padding can replace spaces*/
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
Remove "nbsp" and add a margin,
See below example
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
}
/*MARGIN ADDED HERE*/
.cf li {
margin-left: 3px;
margin-right: 3px;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
I wonder why can't i say hi in the beggining of the message? It's being auto removed. Anyway i'm trying to make a css only slide out menu following this lesson:
https://www.youtube.com/watch?v=d4P8s-mkMvs&list=PLqGj3iMvMa4L8L9p0bCpBn6A5lwKxqwqR
But for some reason it doesn't work for me. The idea is - when menu icon is clicked the checkbox is checked and menu should change it's margin-left from -200 to 0. But it doesn't.
Any help?
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
nav {
height: 100%;
position: fixed;
margin-left: -200px;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
#menustate {
margin-left: 400px;
}
#menustate:checked + .page-wrap .sidebar{
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<nav class="sidebar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Cities</li>
<li>Contacts</li>
</ul>
</nav>
<label for="menustate"><p class="menuicon" href="">☰</p></label>
<div class="check">
<input type="checkbox" id="menustate" value="">
</div>
</div>
</body>
</html>
Css + operator
When using the css + operator. It needs to be a sibling directly next
to one an other.
Added transition, makes it look better.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
nav {
height: 100%;
position: fixed;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
.sidebar {
margin-left: -200px;
transition: margin-left 1s;
}
#menustate:checked + .sidebar {
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<label for="menustate">
<p class="menuicon" href="">☰</p>
</label>
<input type="checkbox" id="menustate" value="">
<nav class="sidebar">
<ul>
<li>Home
</li>
<li>Products
</li>
<li>Cities
</li>
<li>Contacts
</li>
</ul>
</nav>
</div>
</body>
</html>
The problem is that your selector, which should be "doing the magic" is incorrect.
#menustate:checked + .page-wrap .sidebar
This will target a .sidebar element, inside a .page-wrap element which is ADJACENT to a checked #menustate element. This means that not only do the #menustate and .page-wrap need to be siblings, the former needs to be placed RIGHT before the latter. So something like this.
<input id="menustate" type="checkbox">
<div class=".page-wrap>
<div class="sidebar"></div>
</div>
Below is a JSFiddle link of some of my code. I was trying to achieve a slick looking pure html/css drop-down menu without the use of bootstrap or other plug-in sorts. However I can't seem to get the 'Creative' drop-down elements to appear below the navigation bar, they instead appear in-line and I have tried to change other parts of the code to make it work but I can't seem to do it without compromising the rest of the nav-bar.
Please if someone could give it a look at get it so when you hover 'Creative' it's children list elements appear below it. Preferably without just styling padding and margins.
https://jsfiddle.net/nytnfvmq/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li a {
width: 20%;
display: inline;
text-align: center;
float: left;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: relative;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li a {
background-color: red;
color: green;
}
You have a few things wrong. Don't float and assign widths to the anchor tags. Instead float the list items. You'll also need to add position: relative to the li and then add position: absolute; left: 0; top: 100%; to the child ul. That should about do it I think.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li {
width: 20%;
float: left;
position: relative;
}
nav ul li a {
display: block;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
background-color: red;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>