I made a menu fixed and sticky. Menu border bottom bar is active when the user hover mouse on it but what I want is when the user is on source section, previous Call Data section will still be active. Current and previous sections, both will be active. Can someone help me with this?
see the images of the menu please,
Call Data
Source
<div class="nav" id="myNav">
<ul>
<li>Call Data</li>
<li>Source</li>
<li>Lead</li>
<li>Address</li>
<li>Motivation</li>
<li>Property</li>
<li>Visit</li>
<li>Finish</li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
and css here,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
position: sticky;
top: 0;
overflow: hidden;
background-color: white;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* firefox */
z-index: 5;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 24px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
color: green;
border-bottom: 3px solid green;
}
.nav a.active {
color: green;
border-bottom: 3px solid green;
}
.nav .icon {
display: none;
}
#media screen and (max-width: 1210px) {
.nav a:not(:first-child) {
display: none;
}
.nav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1210px) {
.nav.responsive {
position: sticky;
top: 0;
overflow: hidden;
background-color: white;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* Safari */
z-index: 5;
opacity: 0.9;
}
.nav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
You could try with a css siblings selector, e.g.:
li > a[href="#source"]:hover ~ li > a[href="#call-data"]{
color: green;
border-bottom: 3px solid green;
}
if this doesn't work you can use jquery, with the good old $('#element').hover(); method.
try this
.nav a:visited {
color: green;
border-bottom: 3px solid green;
}
Let me know if you have any doubt.
Related
I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})
Solution with jQuery for build up Hamburger navbar responsive
For my example:
(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);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
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 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
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: #6d7993;
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: #ffffff;
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>
Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.
After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/
Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.
You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.
There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
I know similar questions have been asked to do with the z index not working for a dropdown, but all of these have either not worked for my case, or were not applicable for one reason or another.
Anyway, I have an issue that whenever I hover over the main block to trigger the dropdown menu, when it does it appears behind the div that I have in front of it. (Not sure if it matters, but when I hover over an option on the dropdown, it changes colour as it is supposed to do when hovered over and it then jumps in front of the div like it was supposed to do initially).
I am not sure what is causing this as I have tried messing around with the z-index and positions in the css and just can't get it to work, and it would be a great help if someone could find out why this isn't working? I will post the relevant code below.
Thanks
P.S. I have tried in multiple browsers and this problem persists.
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div1>
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div1>
css:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div1 {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: -1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
here is my revision, i put a blue background for seen correct over menu to content.
And there is no element called div1 in DOM html.
i put #navdiv at top of zIndx, because is container of nav.
https://jsfiddle.net/exxe4ksc/
CSS:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
position:relative;
z-index:100;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #999;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
background:#440099;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div#content {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: 1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div id ="content">
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div>
It's working just fine as is - you're font off the get go is white though on white background so you don't see it.
Here is a link to a working version.
http://codepen.io/hoonin_hooligan/pen/PpqxBL
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
The problem is not the z-index, try with other color on you hover dropdown like this code:
.dropdown:hover .dropdown-content {
display: block;
background: blue;
}
I am trying to make a div go under another div in which neither are fixed elements.
Here is my code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
li {
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #4CAF50;
}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #4CAF50;}
.dropdown:hover .dropdown-content {
display: block;
}
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #4CAF50;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
#white {
background-color: white;
width: 90%;
height: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li>Creations</li>
<li>Photos</li>
<li class="dropdown">
<a class="dropbtn" href="#news">Events</a>
<div class="dropdown-content">
DIY
Flea Market Flip
</div>
</li>
<li>Recycle + Upcycle</li>
<li>Saving The Enviroment</li>
<li>Contact Me</li>
</ul>
<div id="white"></div>
I need to be able to make my drop down menu appear over the div named #white. Another note, my links currently lead nowhere, so they are useless right now.
You have css property overflow:hidden in your ul.topnav and need to remove that to show the drop-down menu. Also I added z-index values to ul.topnav and #white so that menu go over the div.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f3f3f3;
z-index: 2;
display: inline-block;
position: relative;
}
#white {
background-color: white;
width: 90%;
height: 1000px;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
}
Here is a example fiddle. Hope this helps you.
i'm trying to fix my responsive navigation bar. supposed to be, when the screen is resized smaller, the navigation will change to a single button which is "menu" and when clicked, it will toggle the navigation vertically. the problem is, even at full screen size, the menu still shows up. this should only appear when screen was changed. thank you
HTML:
<div class="nav">
<ul>
<li ><a class="active" href="index.php">Home</li>
<li >About us
<ul>
<li>Company Profile</li>
<li>Management</li>
<li>Testimonials</li>
<li>Services</li>
</ul>
</li>
<li >Contacts</li>
<li >Careers</li>
<li >Blog
<ul>
<li>Tips</li>
<li>Success Story</li>
</ul>
</li>
<li class="contact">Login</li>
</ul>
<div class="handle"> Menu </div>
</div>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
MEDIA
********************************************/
.handle.hidden {
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: none;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.showing { max-height: 20em; }
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
.handle{
display: block;
background-color: rgba(0,0,0,0.8);
}
}
SCRIPT:
<script type="text/javascript">
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
With your current code you would need to add the class .hidden dinamically to the .menu html element which is not very convenient but there is a simpler way to make the menu disappear. Just try:
.handle { /* now we don't use the .hidden class */
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: block;
}
...
/* inside media query */
#media screen and (min-width: 650px) {
.handle {
display: none; /* this hides the menu on bigger screens */
background-color: rgba(0,0,0,0.8);
}
}