Highlighted

Dropdown menu only works on mobile (from hamburger) but not on desktop

Community Beginner ,
Nov 16, 2018

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="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>

TOPICS
Create menus in Dreamweaver

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dropdown menu only works on mobile (from hamburger) but not on desktop

Community Beginner ,
Nov 16, 2018

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="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>

TOPICS
Create menus in Dreamweaver

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 16, 2018 0
Adobe Community Professional ,
Nov 16, 2018

Copy link to clipboard

Copied

Hi Emma ,can you post a link to the website?


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
LEGEND ,
Nov 16, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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()">&#9776;</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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

Copy link to clipboard

Copied

Does the order that I place things in my custom CSS make any difference?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
LEGEND ,
Nov 16, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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()">&#9776;</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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Adobe Community Professional ,
Nov 16, 2018

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?


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Adobe Community Professional ,
Nov 16, 2018

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;

  }

/* } */


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 1
Community Beginner ,
Nov 16, 2018

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..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Adobe Community Professional ,
Nov 16, 2018

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.   

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 1
Adobe Community Professional ,
Nov 16, 2018

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 16, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Adobe Community Professional ,
Nov 16, 2018

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

  1. Filenames cannot contain spaces or special characters.  You may use underscores or hyphens.
  2. Linux servers are cASe SeNsItIVe.  If I were you, I would avoid CamelCase naming.  Use all lowercase or all UPPERCASE.   Your choice.  But find a file naming convention that you can stick with.  It will make things easier down the road.
  3. IDs are unique and can be used only 1 x per page.
Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 1
Adobe Community Professional ,
Nov 16, 2018

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 1
Community Beginner ,
Nov 16, 2018

Copy link to clipboard

Copied

Wow. You're epic. Thank you

I'll follow up on this tomorrow really appreciate your help Nancy

Emma

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2018 0
Community Beginner ,
Nov 17, 2018

Copy link to clipboard

Copied

Hi Nancy

I have done what you suggested and refreshed the file upload.

Kind regards Emma

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2018 0
Adobe Employee ,
Nov 19, 2018

Copy link to clipboard

Copied

Just to be sure, was your issue resolved, or do you still need help?

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2018 0
Community Beginner ,
Nov 21, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0
LEGEND ,
Nov 21, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Community Beginner ,
Nov 21, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0
osgood_ LATEST
LEGEND ,
Nov 21, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0