I'm new to coding and I'm making a website. But I have a problem, it can't get it centered. I don't want it full width but a bit off the side like a box. Like you can see, there is more margin on the right than on the left, how is that possible? Is it a bug or just something that I need to add in order that it will work? Hopefully you can help me! Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
width: 95%;
margin: 0 auto;
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Generally to center something we use margin: 0 auto. Try adding that to your nav styling.
To pull your nav items to the right, I would try using flexbox (a great thing to learn if you're new to HTML/CSS).
Here's the final CSS:
nav {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
The CSS you applied to .container should move to header
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
width: 95%;
margin: 0 auto;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Set you'r .container to position: relative; or you go like:
.container {
width: 95%;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;}
Related
I want to make a responsive navigation on my website.
i didn't use a grid
I tried
#media screen and (max-width: 600px) {
.menu{
height: 100%;
width: 15px;
float: top;
}}
but that don't work
I want it to get on the top of my website
So some suggestions:
Send the html code or jsut some of it.
You can also try adding margin: 0; to the body:
body{
margin: 0;
}
You will also need to add a background - color:
.menu {
background-color: red;
}
And more stuff could be added but you can check this:
https://www.w3schools.com/howto/howto_css_style_header.asp
This helps a lot
You can use this codepen which I had made yesterday or may be before that, I don't remember :-
https://codepen.io/CodingPencil/pen/abEWzXp
Or just copy my code here :-
HTML -
<nav>
<div>
Something
</div>
<div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu" id="menu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
CSS -
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--nav-bg: #03000e;
--main-clr: dodgerblue;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
width: 100%;
background: #03000e;
}
nav .logo {
color: #fff;
text-decoration-color: var(--main-clr);
font-size: 22px;
font-family: "Playfair Display", serif;
font-weight: 100;
}
nav ul {
--padding: 20px;
--font-size: 17px;
list-style: none;
display: flex;
align-items: center;
font-size: var(--font-size);
overflow-y: hidden;
transition: 1s ease;
}
nav ul li {
padding: var(--padding);
}
nav ul li a {
color: #fff;
text-decoration: none;
position: relative;
}
nav ul li a::after {
content: "";
width: 0%;
height: 2.5px;
border-radius: 99px;
background: var(--main-clr);
position: absolute;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
nav .menu {
width: 22px;
height: 16px;
cursor: pointer;
display: none;
align-items: center;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 20px;
}
nav .menu span {
width: 100%;
height: 2px;
border-radius: 99px;
background: #fff;
transition: 0.3s ease;
transform-origin: left;
}
nav .menu.active span {
background: var(--main-clr);
}
nav .menu.active span:nth-child(1) {
transform: rotate(40deg);
}
nav .menu span:nth-child(3) {
transform-origin: left;
}
nav .menu.active span:nth-child(3) {
transform: rotate(-40deg);
}
nav .menu.active span:nth-child(2) {
transform: scale(0);
}
#media (max-width: 910px) {
nav .menu {
display: flex;
}
nav ul {
--height: 0px;
flex-direction: column;
background: var(--nav-bg);
position: absolute;
width: 100%;
left: 0;
top: 56px;
height: var(--height);
transition: 1s ease;
}
nav ul.active {
--height: calc(
(((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
);
transition: 1s ease;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
width: 100%;
text-transform: capitalize;
}
}
And the JAVASCRIPT -
const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");
menu.addEventListener("click", () => {
navigation.style.setProperty("--childenNumber", navigation.children.length);
navigation.classList.toggle("active");
menu.classList.toggle("active");
});
There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.
try below one,
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
References:
https://getbootstrap.com/docs/5.0/components/navbar/
https://www.w3schools.com/css/css_navbar.asp
Note: float:top is not working
I'm trying to float: right my the email/tel and toggle menu button to the right side of the page but have it in the order: email/tel/toggle menu button (toggle menu button on the furthest right). I want the items to push each other across as the window narrows and then I already have a #media to get rid of the tel and email at a certain width.
The toggle menu button is ahead of my contact details but I figured that if they were all set to float right then then order that you put them in the html should determine how they appear on the page?
Also, as another question, my children menu of drop down menu (under services in my code pen) don't line up with the main header, what css do I need to add/change to fix this?
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggleContainer (
display:inline-block;
float: right;
width: auto;
)
.toggle-menu {
width: 50px;
height: 50px;
top: 10px;
position: absolute;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
HTML
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Great <span class="edit-name" style="font-family:arial black">Things</span>
</a>
</h1>
<div class="teleHeader">
<span class="narrow-hide" ">
<a>
TEL: +44 (0) 111111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#awesome.co.uk
</a>
</span>
</div>
<div class="toggleContainer">
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
#Services
<ul class="services-dropdown">
<li>Hi</li>
<li>There</li>
<li>How</li>
<li>Funny</li>
</ul>
</li>
<li>
More
</li>
<li>
Stuff
</li>
<li>
k
</li>
</ul>
</nav>
</header>
Script
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
CODEPEN: https://codepen.io/Ribeye/pen/qBbJRMa
I would recommend you going for using flexbox, it will be much easier then trying to align inline-block elements.
Here is a good ressource on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As said by #Mark-Att, you can use flexbox to overcome this issue.
I've modified your HTML and added corresponding CSS. Try viewing the result in a full page and you will see the results.
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$header_top.toggleClass('open-menu');
});
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.general-info{
display: flex;
align-content: end;
flex-direction: row;
justify-content: flex-end;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
margin-right: 20px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Awesome <span class="edit-name" style="font-family:arial black">Cakes</span>
</a>
</h1>
<div class="general-info">
<div class="teleHeader">
<span class="narrow-hide">
<a>
TEL: +44 (0) 11111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#yay.com
</a>
</span>
</div>
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
</li>
<li>
abc
</li>
<li>
abc
</li>
</ul>
</nav>
</header>
I am using a a navbar template but I am having an issue where the navbar links still exist on the page and are clickable even when the navbar is "closed".
I was thinking of maybe changing the class with the script, modifying the existing one but I actually am not sure how to do that.
What is the best way to hide the links or get rid of them temporarily when the navbar is closed?
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<li>
Data Protection
</li>
<li>
Data Protection
</li>
</ul>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script>
Codepen: https://codepen.io/Ribeye/pen/BajOoeb
Just add overflow: hidden to nav and it will be fixed;
nav {
overflow: hidden;
}
You've set height: 0 and opacity: 0, but the content still overflows and the only reason it's not visible is bacause of opacity: 0 property, that just makes it transparent so it's still clickable.
You should add pointer-events: none to .nav and pointer-events: auto to .open-menu ~ nav
auto
The element behaves as it would if the pointer-events property
were not specified. In SVG content, this value and the value
visiblePainted have the same effect.
none
The element is never the target of pointer events; however,
pointer events may target its descendant elements if those descendants
have pointer-events set to some other value. In these circumstances,
pointer events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
Ref
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
/* added */
nav {
pointer-events: none;
}
.open-menu~nav {
pointer-events: auto;
}
/*****/
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<l>
Data Protection
</l>
<l>
Data Protection
</l>
</ul>
</nav>
</header>
You just need to set overflow: hidden property on the nav element
I was trying to make navigation bar of a demo present here http://www.templatemonster.com/demo/51129.html
HTML :
<div class="main-container">
<div class="top-nav-wrap">
<div class="top-nav">
<ul>
<li class="border"><a href="#" >HOME</a></li>
<li class="border submenu"><a href="#" >BLOG</a>
<div class="submenu-wrap">
<ul class="submenu-1">
<li>TESTIMONIALS</li>
<li>ARCHIVES</li>
<li>FAQS</li>
</ul>
</div>
</li>
<li class="border"><a href="#" >SERVICES</a></li>
<li class="border"><a href="#" >OUR GALLERY</a></li>
<li class="border"><a href="#" >CONTACTS</a></li>
</ul>
</div>
</div>
<div class="top-container">
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../images/header-img.jpg);
font-family: 'Roboto Condensed', sans-serif;
height: 1900px;
}
.top-container {
overflow: hidden;
}
.top-nav-wrap {
width: 100%;
}
div.top-nav-scrolled.top-nav-wrap {
position: fixed;
top: 0;
left: 0;
background: white;
}
.top-nav {
width: 1200px;
margin: auto;
/*overflow: hidden;*/
}
.top-nav ul {
/*overflow: hidden;*/
list-style: none;
}
.top-nav ul li {
position: relative;
float: left;
padding-top: 30px;
margin-left: 50px;
padding-bottom: 10px;
}
.top-nav ul li:first-child {
margin-left: 0;
}
.top-nav li a {
text-decoration: none;
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
color: #ba4b07;
}
.top-nav li.border::before {
position: absolute;
left: -25px;
content: '\\';
font-size: 20px;
color: #ba4b07;
}
.top-nav li.border:first-child::before {
content: '';
}
.top-nav li.border> a::after {
position: absolute;
top: -30px;
left: 0;
content: '';
display: block;
width: 100%;
height: 20px;
background: #ba4b07;
transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
top:0px;
}
.submenu-wrap {
height: 0px;
position: absolute;
top: 100%;
overflow: hidden;
transition: all 0.3s ease;
}
.submenu:hover > div {
height: 100%;
}
ul.submenu-1 {
width: 300px;
padding-top: 15px;
padding-bottom: 30px;
background:#ba4b07;
}
ul.submenu-1 li{
padding: 0px;
float: none;
margin: 0;
}
ul.submenu-1 li a {
display: block;
padding: 20px;
color: white;
font-size: 1em;
}
ul.submenu-1 li:hover {
background: white;
}
ul.submenu-1 li:hover a {
color: #ba4b07;
}
Js:
$(function(){
$('.top-nav ul li a').on('mouseover',function(){
$(this).addClass('hoverNav');
}).on('mouseout',function(){
$(this).removeClass('hoverNav');
});
$(window).on('scroll',function(){
$('.top-nav-wrap').addClass('top-nav-scrolled');
if($(window).scrollTop()==0){
$('.top-nav-wrap').removeClass('top-nav-scrolled');
}
});
});
The problem over here is .submenu:hover > div having height:100%;.
I saw many answers over here regarding height 100% but was not able to understand.
height:100% over here is taking only some part of the whole div and not the full.
I could have used hardcoded pixels but all my submenus are of different size and using the same class.
EDIT : Moreover using height:auto wont let my css transition to work. and same with using max-height.
I want my css transition to stay.
Change your sub-menu to height:auto, thus it calculates height according to the child elements present inside, as below.
Update to achieve height transition, you could try something as below, still height will be auto, but could transit using inner elements.
.submenu:hover >.submenu-wrap {
height:auto;
}
.submenu:hover >.submenu-wrap> ul.submenu-1 {
padding-top: 15px;
padding-bottom: 30px;
}
.submenu:hover >.submenu-wrap> ul.submenu-1 li a {
padding-top: 20px;
padding-bottom: 20px;
}
Check updated jsFiddle
You can use this code it may help you.
CSS
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../images/header-img.jpg);
font-family: 'Roboto Condensed', sans-serif;
height: 1900px;
}
.top-container {
overflow: hidden;
}
.top-nav-wrap {
width: 100%;
}
div.top-nav-scrolled.top-nav-wrap {
position: fixed;
top: 0;
left: 0;
background: white;
}
.top-nav {
width: 1200px;
margin: auto;
/*overflow: hidden;*/
}
.top-nav ul {
/*overflow: hidden;*/
list-style: none;
}
.top-nav ul li {
position: relative;
float: left;
padding-top: 30px;
margin-left: 50px;
padding-bottom: 10px;
}
.top-nav ul li:first-child {
margin-left: 0;
}
.top-nav li a {
text-decoration: none;
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
color: #ba4b07;
}
.top-nav li.border::before {
position: absolute;
left: -25px;
content: '\\';
font-size: 20px;
color: #ba4b07;
}
.top-nav li.border:first-child::before {
content: '';
}
.top-nav li.border> a::after {
position: absolute;
top: -30px;
left: 0;
content: '';
display: block;
width: 100%;
height: 20px;
background: #ba4b07;
transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
top:0px;
}
.submenu-wrap {
/*height: 0px;*/
position: absolute;
top: 100%;
overflow: hidden;
/*transition: all 0.3s ease;*/
display: none;
}
.submenu:hover > div {
/* height: 100%;*/
}
ul.submenu-1 {
width: 300px;
padding-top: 15px;
padding-bottom: 30px;
background:#ba4b07;
}
ul.submenu-1 li{
padding: 0px;
float: none;
margin: 0;
}
ul.submenu-1 li a {
display: block;
padding: 20px;
color: white;
font-size: 1em;
}
ul.submenu-1 li:hover {
background: white;
}
ul.submenu-1 li:hover a {
color: #ba4b07;
}
JS
$(function(){
$(".top-nav ul li").hover(function(){
$(this).find(".submenu-wrap").slideToggle();
});
$('.top-nav ul li').on('mouseover',function(){
$(this).children().addClass('hoverNav');
}).on('mouseout',function(){
$(this).children().removeClass('hoverNav');
});
$(window).on('scroll',function(){
$('.top-nav-wrap').addClass('top-nav-scrolled');
if($(window).scrollTop()==0){
$('.top-nav-wrap').removeClass('top-nav-scrolled');
}
});
});
I would like to see my menu links.
I have implemented a CSS dropdown menu using the checkbox hack.
I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.
However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:
#navbar-checkbox:checked + .menu ul {
max-height: 50px; ==============> 75px
z-index: 3;
}
I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.
I simply want to display the links.
body {
background-color: purple;
}
.menu {
padding: 15px 15px 0px 15px;
background: transparent;
min-height: 2.75em;
line-height: 0em;
border-bottom: 1px solid white;
position: relative;
}
.logo {
color: white;
transition: 0.4s ease-in-out;
}
#logo {
background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 80%;
display: block;
margin-top: 35px;
margin-bottom: -10px;
height: 50px;
width: 50px;
transition: 0.4s ease-in-out;
z-index: 2;
}
.logo:hover {
color: mediumturquoise;
transition: 0.4s ease;
}
.menu .logo div {
position: absolute;
width: 200px;
margin-top: -20px;
}
.logo p {
margin-left: 15px;
margin-top: 35px;
font-size: 20px;
font-weight: 800;
font-family: 'Coustard', serif;
}
.menu ul {
font-family: 'Open Sans', sans-serif;
color: white;
transition: max-height 0.4s linear 0;
margin: 0;
padding: 0;
text-align: right;
}
.menu a {
text-decoration: none;
color: white;
transition: 0.4s ease-in-out;
}
.menu a:hover {
color: black;
transition: 0.4s ease-in-out;
}
.menu li {
display: inline-block;
padding: .45em 1.1em;
}
#media(max-width:321px){
#logo {
margin-left: 5%;
}
}
#media (min-width: 0px) {
.menu ul {
max-height: 0;
overflow: hidden;
}
.menu li {
visibility: visible;
display: inline-block;
padding: 4em 0 0.5em;
border: none;
margin-right: 4px;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 50px;
z-index: 3;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: white;
}
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6666666666666667em;
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
top: 0.37777777777777777em;
}
.navbar-handle:after {
top: 0.8888888888888888em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 1.3em;
color: white;
right: 25px;
z-index: 10;
}
.navbar-checkbox {
display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<a class="logo" href="http://myapp.com">
<div class="logo">
<p>myapp.com</p>
</div>
</a>
<ul>
<li>how it works
</li>
<li>about us
</li>
<li>contact
</li>
</ul>
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>
Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;
here are corrections:
put these before
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>
these style must be added and edited
#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}
My advice:
#navbar-checkbox:checked + .menu ul {
display: block;
}
#navbar-checkbox + .menu ul {
display: none;
}
Do not use height as parameter.