Hi Preran,
Thanks for your message. No it's not resolved. I've heard nothing since I made the amendments to my website that Nancy kindly suggested.
Everything is now working beautifully other than the drop-down menu on larger screen sizes, still
It works fine from the hamburger though
Www.labyrinthdesigns.co.uk
Thanks
Emma
Are you able to copy and paste code?
If so why dont you just ditch the navigation you are currently using and deploy something that actually works.
I've included the complete navigation code way below (scroll down) but I'll go through what you need to do step by step;
Step 1:
Replace your current navigation code with:
<nav>
<div class="mobile-icon"><i class="fa fa-bars"></i></div>
<ul class="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#About-Me">About Me</a></li>
<li><a href="Creative Services.html">Creative Services</a></li>
<li><a href="#">Portfolio <i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="#">Brand and Logo</a></li>
<li><a href="#">Artwork and Print</a></li>
</ul>
</li>
<li><a href="Creative Services.html#Pricing">Pricing</a></li>
<li><a href="index.html#Enquiry Form">Contact</a></li>
</ul>
<!-- end topnav -->
</nav>
<!-- end nav -->
Step 2:
Add the below css to your custom css stylesheet OR better still, as you are learning put the css in is own stylesheet called main-nav.css and link it to the page (you know how to do that right?):
Link:
<link rel="stylesheet" href="main-nav.css" type="text/css">
Actual css:
nav {
background-color: #7ab800;
border: 1px solid #772059;
}
/* TOP NAV */
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
background-color: #7ab800;
}
.topnav li {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.topnav li {
width: 100%;
}
}
.topnav a {
display: block;
text-decoration: none;
margin: 0;
padding: 20px;
color: #fff;
border-left: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.topnav a {
border-left: none;
border-bottom: 1px solid #772059;
}
}
.topnav a:hover {
color: #772059;
}
.topnav li:last-child {
border-right: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.topnav li:last-child {
border-right: none;
}
}
/* SUB MENU */
.sub-menu {
position: absolute;
border: 1px solid #772059;
top: 100%;
left: 0;
width: 250px;
background-color: #7ab800;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.sub-menu {
position: static;
width: 100%;
border: none;
}
}
.sub-menu a {
border-left: none;
}
.sub-menu li:last-child {
border-right: none;
border-top: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.sub-menu li:last-child {
border-top: none;
}
}
/* MOBILE ICON */
.mobile-icon {
display: none;
text-align: right;
font-size: 25px;
padding: 10px 20px;
color: #fff;
}
@media screen and (max-width: 768px) {
.mobile-icon {
display: block;
}
}
.topnav li a i {
font-size: 18px;
}
Step 3:
Add the jQuery <script></script> below to your page directly before the closing </head> tag OR insert it in is own js file called main-nav.js (minus the <script></script> tags) and link it to the page (you know how to do that right?):
Link:
<script src="main-nav.js"></script>
Actual script:
<script>
$(document).ready(function(){
$('.sub-menu').hide();
// TOPNAV - SHOW SUB MENU
$('.topnav li a').css('cursor' , 'pointer').click(function(){
$(this).next('.sub-menu').slideToggle();
});
// MOBILE ICON - SHOW NAV
$('.mobile-icon').css('cursor' , 'pointer').click(function(){
$('.topnav').slideToggle();
});
// WINDOW RESIZE FUNCTION TO SET NAV DISPLAY OPTIONS
$(window).resize(function() {
//do something
var width = $(document).width();
if (width > 768) {
$('.topnav').css('display', 'flex')
}
else if (width < 768) {
$('.topnav, .sub-menu').css('display', 'none')
}
});
});
</script>
Full document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Navigation</title>
<style>
body {
font-family: Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', 'monospace';
margin: 0;
}
nav {
background-color: #7ab800;
border: 1px solid #772059;
}
/* TOP NAV */
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
background-color: #7ab800;
}
.topnav li {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.topnav li {
width: 100%;
}
}
.topnav a {
display: block;
text-decoration: none;
margin: 0;
padding: 20px;
color: #fff;
border-left: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.topnav a {
border-left: none;
border-bottom: 1px solid #772059;
}
}
.topnav a:hover {
color: #772059;
}
.topnav li:last-child {
border-right: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.topnav li:last-child {
border-right: none;
}
}
/* SUB MENU */
.sub-menu {
position: absolute;
border: 1px solid #772059;
top: 100%;
left: 0;
width: 250px;
background-color: #7ab800;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.sub-menu {
position: static;
width: 100%;
border: none;
}
}
.sub-menu a {
border-left: none;
}
.sub-menu li:last-child {
border-right: none;
border-top: 1px solid #772059;
}
@media screen and (max-width: 768px) {
.sub-menu li:last-child {
border-top: none;
}
}
/* MOBILE ICON */
.mobile-icon {
display: none;
text-align: right;
font-size: 25px;
padding: 10px 20px;
color: #fff;
}
@media screen and (max-width: 768px) {
.mobile-icon {
display: block;
}
}
.topnav li a i {
font-size: 18px;
}
</style>
<!-- jQuery library -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function(){
$('.sub-menu').hide();
// TOPNAV - SHOW SUB MENU
$('.topnav li a').css('cursor' , 'pointer').click(function(){
$(this).next('.sub-menu').slideToggle();
});
// MOBILE ICON - SHOW NAV
$('.mobile-icon').css('cursor' , 'pointer').click(function(){
$('.topnav').slideToggle();
});
// WINDOW RESIZE FUNCTION TO SET NAV DISPLAY OPTIONS
$(window).resize(function() {
//do something
var width = $(document).width();
if (width > 768) {
$('.topnav').css('display', 'flex')
}
else if (width < 768) {
$('.topnav, .sub-menu').css('display', 'none')
}
});
});
</script>
</head>
<body>
<nav>
<div class="mobile-icon"><i class="fa fa-bars"></i></div>
<ul class="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#About-Me">About Me</a></li>
<li><a href="Creative Services.html">Creative Services</a></li>
<li><a href="#">Portfolio <i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="#">Brand and Logo</a></li>
<li><a href="#">Artwork and Print</a></li>
</ul>
</li>
<li><a href="Creative Services.html#Pricing">Pricing</a></li>
<li><a href="index.html#Enquiry Form">Contact</a></li>
</ul>
<!-- end topnav -->
</nav>
<!-- end nav -->
</body>
</html>
AdChoices