As i'm making my first website there's this white space in my page i'm trying to remove but i can't , i tried the position and few settings but it doesn't seem to work , i even edited few of my already wroten code.
Any help will be good.
Thanks
See here
The github project
I have 2 files 1 for html and 1 for css for now
Here's my html file
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Template_Header_Footer.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Header Last version (sans responsive)</title>
</head>
<body>
<header>
<picture>
<source srcset="images/Logo.png" media="(max-width: 640px)">
<source srcset="images/Logo.png" media="(max-width: 1500px)">
<img id="logo" src="images/Logo.png" style"width:40%;">
</picture>
<picture>
<source srcset="images/paysage.jpg" media="(max-width: 640px)">
<source srcset="images/paysage.jpg" media="(max-width: 1500px)">
<img id="paysage" src="images/paysage.jpg" style"width:40%;">
</picture>
<p>Syndicat CTFC 34</p>
<center>
<h1>Syndicat Constructif, Partenaire du Dialogue Social<h1>
</center>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Connaitre la CFTC
<ul class="nav-dropdown">
<li>Histoire</li>
<li>Valeurs</li>
<li>Identité</li>
</ul>
</li>
<li>
Syndicat CFTC-FPT 34
<ul class="nav-dropdown">
<li>Organisation</li>
<li>Accueil</li>
<li>Rôle et définition</li>
</ul>
</li>
<li>
Vie Professionnelle
<ul class="nav-dropdown">
<li>Formation</li>
<li>Statut</li>
<li>Carrière</li>
<li>Temps de Travail</li>
<li>Congés</li>
</ul>
</li>
<li>
Vie Pratique
<ul class="nav-dropdown">
<li>Action Logement</li>
<li>Pensions Alimentaires impayées</li>
<li>Prime d'activité</li>
<li>Apprentissage</li>
</ul>
</li>
<li>Activités</li>
<li>Actualités</li>
<li>Presse</li>
<li>
Adhésion
<ul class="nav-dropdown">
<li>Les + adhérents</li>
<li>Espace adhérents</li>
<li>Nous rejoindre</li>
</ul>
</li>
<li>
Coordonnées
<ul class="nav-dropdown">
<li>Syndicat CFTC-FPT 34</li>
<li>UD34</li>
<li>Fédération CFTC FPT</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
</header>
</body>
<script type="text/javascript">
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</html>
And that's my CSS Files :
#font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
font-family: "lato";
src: url("fonts\Lato-Regular.ttf");
font-family: "playfairdisplay";
src: url("fonts\PlayfairDisplaySC-Regular.otf");
}
.navigation {
height: 70px;
background: #028893;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
}
nav {
float: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 10px;
line-height: 70px;
background: #028893;
color: #fff;
text-decoration: none;
font-family: oswald;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #1a6066;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
/* position: absolute; */
top: 0;
right: 0;
background: #262626;
/* height: 70px; */
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
/* Partie pour le logo et la photo et la phrase */
#logo {
float: left;
height: 350px;
width: 350px;
}
header p {
font-family: oswald;
font-size: 30px;
padding: 80px;
}
#paysage {
float: right;
height: 400px;
width: 1520px;
}
header h1 {
overflow: hidden;
border: 0px solid #01B2C0;
color: #FFFFFF;
background-color: #01B2C0;
font-size: 30px;
font-family: lato;
/* position: relative; */
bottom: 80px;
width: auto;
/* height: 33px; */
padding-top: 25px;
}
* {
margin: 0;
}
Seems that the height of logo is bigger than the banner height.Manage Logo Height.
Related
Hello i'm trying to remove the left and right "margin" (i don't know if it's the right word) , so all menu buttons can fit inside the bar.
I want all the menu to fit so if in the future i want to add/edit buttons i can do it.
I'm learning HTML/CSS and i kinda understand but i don't know how to remove this.
i tried previewing with chrome dev tools but it didn't help
thanks for the help i really appreciate it !
here's my code :
HTML file (with js script for dropdown)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="header_test_2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>CFTC - TEMPLATE HEADER AND FOOTER</title>
</head>
<body>
<header>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Connaitre la CFTC
<ul class="nav-dropdown">
<li>Histoire</li>
<li>Valeurs</li>
<li>Identité</li>
</ul>
</li>
<li>
Syndicat CFTC-FPT 34
<ul class="nav-dropdown">
<li>Organisation</li>
<li>Accueil</li>
<li>Rôle et définition</li>
</ul>
</li>
<li>
Vie Professionnelle
<ul class="nav-dropdown">
<li>Formation</li>
<li>Statut</li>
<li>Carrière</li>
<li>Temps de Travail</li>
<li>Congés</li>
</ul>
</li>
<li>
Vie Pratique
<ul class="nav-dropdown">
<li>Action Logement</li>
<li>Pensions Alimentaires impayées</li>
<li>Prime d'activité</li>
<li>Apprentissage</li>
</ul>
</li>
<li>Activités</li>
<li>Actualités</li>
<li>Presse</li>
<li>
Adhésion
<ul class="nav-dropdown">
<li>Les + adhérents</li>
<li>Espace adhérents</li>
<li>Nous rejoindre</li>
</ul>
</li>
<li>
Coordonnées
<ul class="nav-dropdown">
<li>Syndicat CFTC-FPT 34</li>
<li>UD34</li>
<li>Fédération CFTC FPT</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
, </header>
</body>
<script type="text/javascript">
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</html>
And my CSS File
#font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
}
.navigation {
height: 70px;
background: #262626;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 10px;
line-height: 70px;
background: #028893;
color: #fff;
text-decoration: none;
font-family: oswald;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #1D71B8;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
/* position: absolute; */
top: 0;
right: 0;
background: #262626;
/* height: 70px; */
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
That's were things are needed to be changed
change max-width
.nav-container {
max-width: 1200px;
margin: 0 auto;
}
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
Hello I found a nice navbar I'd like to use; but I don't know how to make it stick to the top ?
I tried to add position:fixed to .navigation but it is somehow messing things up. The logo is hidden in full screen and the menu can't be find in mobile view.
Here is the snippet url :
https://codepen.io/anon/pen/NYazoj
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
// Navigation Variables
$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #fff;
$nav-font-color: #0c71c3;
$link-hover-color: #2581DC;
$nav-hover-font-color: #fff;
// Outer navigation wrapper
.navigation {
height: $nav-height;
background: $nav-background;
}
article {
height:2000px;
}
// Logo and branding
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: $nav-height;
text-transform: uppercase;
font-size: 1.4em;
a,
a:visited {
color: $nav-font-color;
text-decoration: none;
}
}
// Container with no padding for navbar
.nav-container {
max-width: $content-width;
margin: 0 auto;
}
// Navigation
nav {
float: right;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
float: left;
position: relative;
a,
a:visited {
display: block;
padding: 0 20px;
line-height: $nav-height;
background: $nav-background;
color: $nav-font-color;
text-decoration: none;
&:hover {
background: $link-hover-color;
color: $nav-hover-font-color;
}
&:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
} // Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}
}
}
}
}
// Dropdown list binds to JS toggle event
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
// Binds to JS Toggle
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#media only screen and (max-width: 798px) {
// Hamburger nav visible on mobile only
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
// Page content
article {
max-width: $content-width;
margin: 0 auto;
padding: 10px;
}
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
<p>Want to see how it's made? Read the tutorial!</p>
</article>
To make Header Stick to the top Of browsers following CSS will work:
.navigation {
height: $nav-height;
background: $nav-background;
position: fixed;
top:0;
right: 0;
left: 0;
}
here is JsFiddle For your reference
I am trying to create a dropdown menu in HTML and CSS and it does not work as I'm expecting it to. I don't know what is wrong with it.
I'm attempting to make the menu show the subset of items in the parent items <ul> tags on hover and it is not working. Either the child items don't show at all (just the parent items show) or the child items are strewn all across the page in a weird fashion.
My HTML, CSS AND JavaScript code:
What I'm trying to create (NOT MY VIDEO).
function copyText(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try {
document.execCommand("copy");
} catch(err) {
console.log(err);
}
$temp.remove();
}
function copyMessage() {
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #000
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</li>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>
This is the problem with your css
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
Basically your layout is something like this:
nav -> ul -> li -> ul -> li...
What you are telling the browser is something like this:
nav -> ul -> li -> ul -> nav -> ul -> li -> ul -> li...
Which certainly do not match. Hence, the submenu remains hidden.
So, what to do. Just replace that bit of rule with this
nav ul li:hover ul li{
display: block;
}
Also, change the color of link text to something that would not blend in with the background
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
Try to write your stylesheets around classes. It will help you a lot in avoiding such issues in the future.
function copyText(element){
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try{
document.execCommand("copy");
}catch(err){
console.log(err);
}
$temp.remove();
}
function copyMessage(){
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li:hover ul li{
display: block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</i>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>