Hamburger menu problem

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 719 Views - Last Post: 13 June 2019 - 10:54 PM

#1 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Hamburger menu problem

Posted 21 February 2019 - 02:12 AM

HTML code
<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Ubuntu:700" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>HERA.com</title>
<link href="style.css" rel="stylesheet" type="text/css"> 
<link href="responsive-index.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="script.js"></script>



</head>

<body>
	
<nav>

		
		<a href="index.html"><img src="logo-41.png" alt="logo" class="logo"></a>
		<p class="logonatpis">Hera Design</p>


		<div class="regular-menu">
		
		<ul>
		
		<li class="home"> <a href="index.html" target="_blank">Home</a> </li>	  
		<li class="about"> <a href="about.html" target="_blank">About Me</a> </li>	
		<li class="portfolio"> <a href="my-works.html" target="_blank">My Work</a> </li>	
		<li class="contact"> <a href="contact.html" target="_blank">Contact</a></li>
			  
		</ul>
		
	</div>


<div class="hamburger">

	<span></span>
	<span></span>
	<span></span>
	
</div>

	</nav>
	
	<div class="mobile-menu">
		
		<ul>
		
		<li class="home"> <a href="index.html" target="_blank">Home</a> </li>	  
		<li class="about"> <a href="about.html" target="_blank">About Me</a> </li>	
		<li class="portfolio"> <a href="my-works.html" target="_blank">My Work</a> </li>	
		<li class="contact"> <a href="contact.html" target="_blank">Contact</a></li>
			  
		</ul>
		
	</div>


CSS code- just important for navigation
ul li {
	float:left;
	font-size:20px;
	margin-top: 25px;
	margin-bottom: 25px;
	list-style: none;
}

ul li a {
	text-decoration: none;
	color: #000000;
}

.home {
	margin-left: 400px;
}
.about {
	margin-left: 40px;
}
.portfolio {
	margin-left: 40px;
}
.contact {
	margin-left: 40px;
}

.hamburger {
	display: none;
}

.mobile-menu {
	display: none;
}

Responsive CSS


 @media (max-width:768px) {

	
	
	#main {
		width: 100%;
	}
	
	#footer {
		width: 100%;
	}
	
	.logo {
		margin-left: 10px;
	}
	
	 .regular-menu {
		display: none;
	}
	
	 	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
			
	}
	 
	 .logonatpis {
		 margin-right: 30px;
	 }

	 nav::after {
		 content: none;
	 }
	 
	 
	 
	 
	 	.hamburger {
		display: block;
		cursor: pointer;
	}
	 
	.hamburger span {
	width:50px;
	height:5px;
	display: block !important;
	background-color: #000000;
	margin:8px auto;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition:	all 0.3s ease-in-out;
	
}

	 .hamburger.is-active .span:nth-child(2) {
		 opacity: 0;
	 }	 
	 
	 .hamburger.is-active .span:nth-child(1) {
		 transform: translateY(13px) rotate(45deg);
		 
	 }
	 
	 .hamburger.is-active .span:nth-child(3) {
		 transform: translateY(-13px) rotate(-45deg);
		  
	 }
	 
	}


JS code

$(".hamburger").click(function() {"use strict";
	
$(this).toggleClass("is-active");
$(".mobile-menu").toggle();
	

});


The problem is next. Hamburger menu appears, but when I click on hamburger, nothing is happening. I want when I click on hamburger, to see navigation. I tried many times, but unfortunately, unsuccessful. Please, help me.

This post has been edited by andrewsw: 21 February 2019 - 02:18 AM
Reason for edit:: added missing [code][/code] tags


Is This A Good Question/Topic? 0
  • +

Replies To: Hamburger menu problem

#2 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,097
  • Joined: 12-December 12

Re: Hamburger menu problem

Posted 21 February 2019 - 02:22 AM

Are there errors in your browser's console?

When posting, please apply code tags to your code.

Your posted HTML appears incomplete, but it does not indicate that you have included the jQuery library.
Was This Post Helpful? 0
  • +
  • -

#3 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 21 February 2019 - 02:43 AM

I posted just part of html code, just important for navigation. I really don't know what could be problem. Please help me if you can.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,097
  • Joined: 12-December 12

Re: Hamburger menu problem

Posted 21 February 2019 - 03:31 AM

I am helping, and will repeat my help:

Look in your browser's console for error messages. What are they? You can right-click within your browser to track the developer tools down (or press F12, or find them in a menu).

From what you have posted it looks like you are not including the jQuery library. You cannot run jQuery code if the library is not included.
Was This Post Helpful? 0
  • +
  • -

#5 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 21 February 2019 - 03:48 AM

XML Parsing Error: syntax error
Location: http://127.0.0.1:576...iewapp/localurl
Line Number 1, Column 1: localurl:1:1
call succeeded!! DevicePreviewUtils.js:35:13
success DevicePreviewUtils.js:36:13
ReferenceError: $ is not defined[Learn More]

I copy this text from console. That's message
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,097
  • Joined: 12-December 12

Re: Hamburger menu problem

Posted 21 February 2019 - 03:51 AM

Quote

ReferenceError: $ is not defined[Learn More]

$ refers to jQuery. You have not included the jQuery library. You cannot run any jQuery code if you have not included the jQuery library.

(I don't know what the XML parsing error is about.)
Was This Post Helpful? 0
  • +
  • -

#7 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 21 February 2019 - 09:47 AM

Thanks for all your help. Can you just say to me, because I never used jquery library before, how to download jquery library. Is it important which link I will using to download jquery, or it have to be some special. It's maybe stupid and funny question, but I really want to learn, so please help me.
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15111
  • View blog
  • Posts: 60,456
  • Joined: 12-June 08

Re: Hamburger menu problem

Posted 21 February 2019 - 09:56 AM

Seems straight forward enough to search..

https://www.w3school...get_started.asp
https://code.jquery.com/
https://jquery.com/download/
Was This Post Helpful? 0
  • +
  • -

#9 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 21 February 2019 - 10:32 AM

I made screenshot. I downloaded jquery, but same thing again. Hamburger appears, but when I click on it, nothing happened.
You can see message from web console. What could be problemAttached Image
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,097
  • Joined: 12-December 12

Re: Hamburger menu problem

Posted 22 February 2019 - 01:42 AM

I have no idea what that XML parsing error might mean, but I notice that you are using Dreamweaver, ugh?!

I would blame Dreamweaver in the first instance. If you are using some run or preview feature from within dw to view your site I would sidestep it and open the page directly.
Was This Post Helpful? 0
  • +
  • -

#11 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 22 February 2019 - 03:29 AM

I posted site online. So, now I don't open site within dreamweawer. It's online now. But guess what. Same problem again. Hamburger doesn't work.
https://hera-design.000webhostapp.com/ link for my site.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,097
  • Joined: 12-December 12

Re: Hamburger menu problem

Posted 22 February 2019 - 05:40 AM

Your script script.js is executed before .hamburger is available/rendered on the page, so has no effect. Move this script to the bottom of the page, before the closing body tag (or use jQuery on()).
Was This Post Helpful? 0
  • +
  • -

#13 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 22 February 2019 - 07:44 AM

It work now. But, there is one problem. You can see how navigation items looks. I don't want this. I want that my navigation items are one below one. I tried to apply property:block, but nothing happened. So if you know, it would be great. Thanks for all your helpAttached Image
Was This Post Helpful? 0
  • +
  • -

#14 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,113
  • Joined: 15-January 14

Re: Hamburger menu problem

Posted 22 February 2019 - 11:46 AM

Your regular menu and mobile menu have the same styles, including using float. Start by removing the float and go from there.
Was This Post Helpful? 0
  • +
  • -

#15 HTML coder   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 07-February 19

Re: Hamburger menu problem

Posted 23 February 2019 - 08:41 AM

Thanks man. I finally fixed my problem. Thank you very match. All the best in future. Thanks once more
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2