2 Replies - 285 Views - Last Post: 01 July 2019 - 10:09 PM

#1 HTML coder   User is offline

  • New D.I.C Head

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

Problem with mobile/tablet navigation

Posted 12 February 2019 - 09:14 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">
<title>HERA.com</title>
<link href="stil.css" rel="stylesheet" type="text/css"> 
<link href="responsive index.css" rel="stylesheet" type="text/css"> 

</head>

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

	   
		  
		<ul id="menu" class="regular-menu">
		
		<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>
		
		<img src="icon-menu.png" class="hamburger">
		
		</div>
		


		
		

		
	
			
			
<div id="main">

	<img src="logo.png" class="mainlogo">
	<p class="natpis">Hera Design</p>
	<p class="msentence">We make the world better and more beautiful place</p>
	<hr>
	<p class="m1">YOU DESERVE</p>
	<p><span class="span">the best</span> <span class="span1">solutions,</span></p>
	<p class="m2">so we're here</p>
	<p class="m3">TO DO IT!</p>
	<hr>
	<p class="m4">Visit cards,banners,logo,website,</p>
	<p class="m5"><span class="span2">everything</span> what you need, you can find here</p>

	
	</div>
		
	<div id="footer">
		<p class="footer">Hera Design 2018 All Rights Reserved</p>
		</div>	
	
	
	</div>
	
	
	
</body>
</html>

:code:

CSS code (some of code,just important for navigation)
@charset "utf-8";
/* CSS Document */

* {
	padding: 0px;
	margin: 0px;
	
}


#header {
	
	background-color:#FFFFFF;
	height:70px;
	width: 100%;
	
}


.logo {
	
	height:60px;
	float: left;
	margin-left: 60px;
	margin-top:5px;
	margin-bottom: 5px;
}

.logonatpis {
	float: left;
	font-size: 30px;
	margin-top:20px;
	margin-bottom: 20px;
	margin-left: 15px;
	font-weight: bold;
}

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;
	
}

@charset "utf-8";
/* CSS Document */

@media only screen and (min-width:1024px) and (max-width:1260px) {
	
	
	#header {
		width: 100%;
	}
	
	.home {
		margin-left: 200px;
	}
	
	
	#main {
		width: 100%;
	}
	
	
	#footer {
		width: 100%;
	}
	
	}

@media only screen and (min-width:768px) and (max-width:1023px) {
	
	
	#header {
		width: 100%;
			
	}
	
	#header ul li {
		margin-left: 40px;
	}
	
	
	.home {
		margin-left: 150px;
	}
	
	.about {
		margin-left:10px;
	}
	
	.portfolio {
		margin-left:10px;
	}
	
	.contact {
		margin-left: 10px;
	}
	
	
	.logo {
		margin-left: 20px;
	}
	
	#main {
		width: 100%;
	}
	
	#footer {
		width: 100%;
			
	}
	
		
	}
	

@media only screen and (min-width:652px) and (max-width:767px) {

	#header {
		width: 100%;
			
	}
	
	#main {
		width: 100%;
	}
	
	#footer {
		width: 100%;
			
	}
	
	.logo {
		margin-left: 10px;
	}
	
	.home {
		margin-left: 150px;
	}
	
	#header ul li {
		margin-left: 20px;
	}
	
	.about {
		margin-left:5px;
	}
	
	.portfolio {
		margin-left:5px;
	}
	
	.contact {
		margin-left: 5px;
	}
	
	}
	

@media only screen and (min-width:560px) and (max-width:651px) {
	
	
	#header {
		width: 100%;
			
	}
	
	#main {
		width: 100%;
	}
	
	#footer {
		width: 100%;
			
	}
	
	#header ul li {
		margin-left: 20px;
	}
	
	.logo {
		margin-left: 10px;
	}
	
	.about {
		margin-left:45px;
	}
	
	.portfolio {
		margin-left:45px;
	}
	
	.contact {
		margin-left: 45px;
	}
	
	
	ul li {
		
		font-size: 16px;
		
		
	}
	
	.logonatpis {
		font-size: 25px;
		margin-left: 10px;
	}
		
}




@media only screen and (min-width:400px) and (max-width:559px) {

	#header {
		width: 100%;		
	}
	
	#main {
		width: 100%;
	}
	
	#footer {
		width: 100%;
	}
	
	.logo {
		margin-left: 10px;
	}

	.hamburger {
		display: block;
		float: right;
		margin-top: 19px;
	}
	
	.regular-menu {
		display: none;
		}



:code:

The problem is next. I want to see navigation when I click on hamburger menu. In this moment, hamburger menu just appears, but, no function. So, if anybody know solution, it would be a great. It's very imporant for me.I want navigation in display:block, so if somebody know, please help me
Thank you all

This post has been edited by modi123_1: 12 February 2019 - 09:21 AM
Reason for edit:: In the future, please use the [code] tag button in the editor.


Is This A Good Question/Topic? 0
  • +

Replies To: Problem with mobile/tablet navigation

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

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

Re: Problem with mobile/tablet navigation

Posted 13 February 2019 - 02:20 AM

What Javascript have you thought about or attempted to achieve this?

If you are not familiar with JS then we won't write this code for you. I suggest that you find one (of very many) tutorials for a hamburger menu. They will guide you through the process including the limited JS that is needed. You can then tweak the CSS to your own design.



As an aside, it is even possible to achieve this without JS, for example:

Responsive, Pure CSS Off-Canvas Hamburger Menu

It is cool that this can be achieved but it has a number of restrictions/caveats and, these days, in most cases we will assume that JS is available.
Was This Post Helpful? 0
  • +
  • -

#3 sagar.chavada   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 10-April 19

Re: Problem with mobile/tablet navigation

Posted 01 July 2019 - 10:09 PM

My point of view you have to try this one it helps to solve your issue

  <script type="text/javascript">
        document.getElementById("nav-toggle").addEventListener ("click", toggleNav);
        function toggleNav() {
                var nav = document.getElementById("nav-menu");
                var className = nav.getAttribute("class");
                if(className == "nav-right nav-menu") {
                    nav.className = "nav-right nav-menu is-active";
                } else {
                    nav.className = "nav-right nav-menu";
                }
        }
    </script>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1