Copy link to clipboard
Copied
Hi all, a little help if I may before I lose all of my hair!
I am a newbie to web design since this year.
I have a responsive dropdown menu that I got from W3 schools which has worked fine until now.
I originally designed the website poorly by altering the bootstrap css and now I know this was wrong as the page behaved badly when it must have updated. I have since copied and pasted all of my html code over onto new bootstrap templates on dreamweaver and not touched the CSS files, I have created a custom.css where I have added all the releavnt over-riding CSS and added the javascript from W3 schools.
I have effectively copied and pasted the code from W3 and just changed small details such as colour, nothing with media queries or anything else, but now the dropdown only works on mobile from hamburger but not on desktop.
Everything else is working fine just this one issue...
Any ideas?
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="Cr
...Copy link to clipboard
Copied
Hi Emma ,can you post a link to the website?
Copy link to clipboard
Copied
Hi Energize
Thanks for your reply, its not live at the moment unfortuantely.
I'm now also having issues with the custom.css some of the styling has just stopped working but some havent
How can I let you see it do I need to get it live first?
Kind regards
Emma
Copy link to clipboard
Copied
Have you altered the default Bootstrap css file?
If not and your custom.css file is relatively short you could paste the html code and custom.css styles in the forum.
It's advisable to upload the page somewhere though so we can see it live.
Copy link to clipboard
Copied
Ok here is my custom.css
body{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
.myForm {
font-family:
font-size: 0.8em;
width: 90em;
padding: 1em;
border: medium #772059;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
border: none;
padding: 0;
}
.myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
font-family:
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 100px;
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-top: 1em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
.jumbotron {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url("Woodland4.jpeg.jpg");
background-position: center;
background-size: cover;
height: 150px;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: none;
}
.topnav a {
float: left;
display: block;
color: white;
background-color: #7AB800;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border: 1px solid #772059;
}
.active {
background-color:#772059;
color: white;
border: 1px solid #772059;
}
.topnav .icon {
display: none;
border: 1px solid #772059;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
color: white;
outline: none;
padding: 14px 16px;
background-color:#7AB800;
font-family: inherit;
margin: 0;
border: 1px solid #772059;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(122,184,0,1.00);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
font-size: 14px;
display: block;
text-align: left;
border: 1px solid #772059;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: none;
color: #772059;
}
.dropdown-content a:hover {
background-color: none;
color: #772059;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
background-color: #7AB800;
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
.btn .btn-primary .btn-lg {
background-color: #772059;
color: #7AB800;
border: 1px solid #772059;
}
.btn .btn-primary .btn-lg a:hover {
background-color: #7AB800;
colour: #772059;
border: 1px solid #772059;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #772059;
background-color: #772059;
color: white;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn {
display: inline-block;
padding: 10px 10px;
margin-bottom: 0;
margin-top: 8%;
font-size: 14px;
font-weight: normal;
border: 1px solid #772059;
color: white;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
}
.btn:hover, .btn:focus {
text-decoration: none;
background-color: #7AB800;
colour: #772059;
border: 1px solid #772059;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
#container2 {
border: 2px solid #772059;
background-color: #eee;
opacity: 0.8;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
#container2::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
#container2 img {
float: left;
margin-right: 20px;
border-radius: 10%;
}
/* Increase the font-size of a span element */
#container2 span {
font-size: 20px;
margin-right: 10px;
text-align: center;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
#container2 {
text-align: center;
}
#container2 img {
margin: auto;
float: none;
display: block;
}
}
.centered {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
color: #772059;
font-size: 30px;
My .btn styling has stopped working now too since I added the form styling, which leads me to believe it could the order I am putting it all in? I've just been moving things around to see if that helps and some styling has started working again.
Here is the html code for the menu and the java
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="index.html#About-Me">About Me</a>
<a href="Creative Services.html">Creative Services</a>
<div class="dropdown">
<button class="dropbtn">Portfolio
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Brand and Logo.html">Brand and Logo</a>
<a href="Artwork and Print.html">Artwork and Print</a>
</div>
</div>
<a href="Creative Services.html#Pricing">Pricing</a>
<a href="index.html#Enquiry Form">Contact</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
Obv at the bottom of the page...
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
Sorry I know theres a lot there
Thanks guys
Emma
Copy link to clipboard
Copied
Does the order that I place things in my custom CSS make any difference?
Copy link to clipboard
Copied
emmad23117089 wrote
Does the order that I place things in my custom CSS make any difference?
No BUT the link to the custom.css file MUST come AFTER the link to the default Bootstrap css file.
Copy link to clipboard
Copied
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="fontawesome-free-5.0.10/web-fonts-with-css/css/fontawesome-all.min.css">
Copy link to clipboard
Copied
Ok here is my custom.css
body{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
.myForm {
font-family:
font-size: 0.8em;
width: 90em;
padding: 1em;
border: medium #772059;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
border: none;
padding: 0;
}
.myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
font-family:
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 100px;
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-top: 1em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
.jumbotron {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url("Woodland4.jpeg.jpg");
background-position: center;
background-size: cover;
height: 150px;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: none;
}
.topnav a {
float: left;
display: block;
color: white;
background-color: #7AB800;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border: 1px solid #772059;
}
.active {
background-color:#772059;
color: white;
border: 1px solid #772059;
}
.topnav .icon {
display: none;
border: 1px solid #772059;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
color: white;
outline: none;
padding: 14px 16px;
background-color:#7AB800;
font-family: inherit;
margin: 0;
border: 1px solid #772059;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(122,184,0,1.00);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
font-size: 14px;
display: block;
text-align: left;
border: 1px solid #772059;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: none;
color: #772059;
}
.dropdown-content a:hover {
background-color: none;
color: #772059;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
background-color: #7AB800;
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
.btn .btn-primary .btn-lg {
background-color: #772059;
color: #7AB800;
border: 1px solid #772059;
}
.btn .btn-primary .btn-lg a:hover {
background-color: #7AB800;
colour: #772059;
border: 1px solid #772059;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #772059;
background-color: #772059;
color: white;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn {
display: inline-block;
padding: 10px 10px;
margin-bottom: 0;
margin-top: 8%;
font-size: 14px;
font-weight: normal;
border: 1px solid #772059;
color: white;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
}
.btn:hover, .btn:focus {
text-decoration: none;
background-color: #7AB800;
colour: #772059;
border: 1px solid #772059;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
#container2 {
border: 2px solid #772059;
background-color: #eee;
opacity: 0.8;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
#container2::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
#container2 img {
float: left;
margin-right: 20px;
border-radius: 10%;
}
/* Increase the font-size of a span element */
#container2 span {
font-size: 20px;
margin-right: 10px;
text-align: center;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
#container2 {
text-align: center;
}
#container2 img {
margin: auto;
float: none;
display: block;
}
}
.centered {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
color: #772059;
font-size: 30px;
My .btn styling has stopped working now too since I added the form styling, which leads me to believe it could the order I am putting it all in? I've just been moving things around to see if that helps and some styling has started working again.
Here is the html code for the menu and the java
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="index.html#About-Me">About Me</a>
<a href="Creative Services.html">Creative Services</a>
<div class="dropdown">
<button class="dropbtn">Portfolio
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Brand and Logo.html">Brand and Logo</a>
<a href="Artwork and Print.html">Artwork and Print</a>
</div>
</div>
<a href="Creative Services.html#Pricing">Pricing</a>
<a href="index.html#Enquiry Form">Contact</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
Obv at the bottom of the page...
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="fontawesome-free-5.0.10/web-fonts-with-css/css/fontawesome-all.min.css">
Sorry I know theres a lot there
Thanks guys
Emma
Copy link to clipboard
Copied
Hi Emma,
Are you trying to achieve the hamburger menu on all screen sizes; mobiles, tablets, desktops etc or a standard navigation bar on larger screens and the hamburger on small screens?
Copy link to clipboard
Copied
Looking at your code, I'd say you need to change one of those media queries, the first line of this bit looks like it might be the culprit:
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Try commenting out the media query and see what happens:
/* @media screen and (max-width: 600px) { */
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
/* } */
Copy link to clipboard
Copied
Thank you
Was just standard navigation on all screens and hamburger on small screens...
I have tried that but still not working
Also cant figure out why my custom.css is working for some things but not others..
Copy link to clipboard
Copied
Even more strangely I am finding that everything works perfectly on the smaller screen, it is just the larger screens where the dropdown doesnt work and the styling for some of the website is not behaving correctly..
Copy link to clipboard
Copied
This is too complex to troubleshoot in a forum. For quicker answers, you need to put your work online so we can see everything in context.
Copy link to clipboard
Copied
Since you're already using Botostrap, why not use Bootstrap's default navbar?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Default Navbar</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Sub-menu 1</a> <a class="dropdown-item" href="#">Sub-menu 2</a> <a class="dropdown-item" href="#">Sub-menu 3</a> </div>
</li>
</ul>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<!--CONTENT GOES HERE-->
</div>
</div>
</main>
<!--jQuery, popper then bootstrap js-->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
Copy link to clipboard
Copied
Hi Nancy
Yeah I'm way too picky didn't like it. Want everything super bespoke!
I've now got the site live www.labyrinthdesigns.co.uk
Let me know what you think I've done wrong please!
Thanks Emma
Copy link to clipboard
Copied
Where do I begin? Let's start with the 86 HTML code errors. Once those are resolved, we can poke around in the CSS if we need to.
Showing results for https://www.labyrinthdesigns.co.uk/ - Nu Html Checker
Copy link to clipboard
Copied
Styles don't belong in your <body>. On Lines 66 through 76, you have this which doesn't belong there.
<style>
@media screen and (min-width: 400px){
#grad1 {
height: auto;
width: 100%;
background: white; /* For browsers that do not support gradients */
background: linear-gradient(to top, rgba(1,0,0,0), rgba(1,0,0,1)); /* Standard syntax (must be last) */
}
}
</style>
Copy link to clipboard
Copied
Wow. You're epic. Thank you
I'll follow up on this tomorrow really appreciate your help Nancy
Emma
Copy link to clipboard
Copied
Hi Nancy
I have done what you suggested and refreshed the file upload.
Kind regards Emma
Copy link to clipboard
Copied
Just to be sure, was your issue resolved, or do you still need help?
Thanks,
Preran
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Hi Osgood
You have gone to a lot of effort that is appreciated. Will the alignment and size of the navbar be the same? Will my logo still stay in the same position?
I will try thank you
Kind regards Emma
Copy link to clipboard
Copied
emmad23117089 wrote
Hi Osgood
You have gone to a lot of effort that is appreciated. Will the alignment and size of the navbar be the same? Will my logo still stay in the same position?
It should be close. Your logo from what I can see is centered under the navbar?