I am converting my desktop menu in the mobile menu, but the code is not working.
I am using checkbox trick, when checkbox is checked the menu will appear, otherwise menu display will be none.
At 1280px my desktop will switched into mobile, but it's not working properly as expected.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soofyantheband</title>
<link rel="stylesheet" href="assets/css/style2.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/mini-nav_bar.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<!-- Webpage Wrap inside "wrapper" -->
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li >Events</li>
<li >Projects</li>
<li >Unplugged</li>
<li >Gallery</li>
<li >Videos</li>
<li >About</li>
<li >Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
display:none;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu ul li a{
display: block;
}
}
There were some issues in your code.
This line #toggle:checked + .menu ul li a won't work. .menu is not a sibling of #toggle, it is a child of a sibling (header). Instead, use the general sibling combinator (~) to target the header.
You set display: none for the ul and li, but then only changed the display type for the ul. Setting display: none for the ul is sufficient.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked ~ header .menu ul {
display: block;
}
}
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<input type="checkbox" id="toggle" />
<label for="toggle">☰</label>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li>Events</li>
<li>Projects</li>
<li>Unplugged</li>
<li>Gallery</li>
<li>Videos</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
So i'm currently working on building my own website but ran into some trouble when it came to centering my actual ul within my navigation bar. The nav bar is already centered and fine but i am trying to center the actual ul and still keep it left aligned. I am using Brackets text editor. Any Help ?
Thanks in advance and heres my CSS code:
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
float: left;
width: 10%;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<html>
<head>
<title>Satori</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
</body>
</html>
Update below css part
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
I am trying set the height of the navigation div for my navigation menu.But I am unable to get why it is not adjusting according to the li tag height.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Journeycook</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<div class="wrapper">
<div class="header">
<div class="header-top">
<a href="#" class="logo">
<img src="logo.png" />
</a>
<div class="header-right">
<div class="call">
<img src="call.png" />
1-877-708-1505
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
</div>
</div>
</div>
<body></body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
}
a img {
outline: 0;
border: 0;
max-width: 100%;
}
.clearfix {
clear: both;
}
a img {
max-width: 100%;
}
ul, li {
list-style: none outside none;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
}
.wrapper .header {
margin: 0 auto;
width: 1024px;
}
.header-top {
margin: 3px 0;
}
.header-top a.logo {
display: block;
float: left;
height: 71px;
width: 215px;
}
.header-right {
float: right;
}
.call {
color: #ffc620;
font-size: 39px;
font-weight: bold;
margin-bottom: 10px;
text-align: right;
}
.header-right .call img {
vertical-align: top;
width: 48px;
}
.navigation {
background: #04498E;
border: 1px solid #002E73;
border-radius: 6px;
}
.navigation ul {
}
.navigation ul li {
border-right: 1px solid #1C61A6;
float: left;
}
.navigation ul li a {
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
}
.navigation ul li a:hover {
background: #ff8c04;
}
.navigation ul li .act {
background: #ff8c04;
}
please experts tell me where i am going wrong
thanks
The reason your navigation DIV is not adjusting to your ul is because of the float you put on it, use clear:both after the ul tag float so your nav div knows to adjust itself
You do not need to declare height on your navigation, if you do it will be fixed height
You have not specified the height for the navigation, simply change the following line and it will work fine:
.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:39px; }
got the solution :)
I forget to add clearfix div after ul tag here is the correct html for navigation div
<div class="navigation">
<ul>
<li>
Home
</li>
<li>
Flights
</li>
</ul>
<div class="clearfix">
</div>