mtechama
Members-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by mtechama
-
Ok, I have the code on the bottom. I have it a drop down menu. What I want is to have the menu slide from the left to right. So what code is need to be changed or added to take an effect? Menu Code: <div class="topnav" id="myTopnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div>
-
I still needing some help. When I ask for some help I never got helped. What I am trying to do is I want the menu slide from the left to right when clicked. I asked for help to what code to change I got ignored.
-
Yes, I am still using this menu for the mobile and tablet layout! http://www.w3schools.com/howto/howto_js_topnav.asp I would like to know how to do the following: I don't want a menu bar all the way across the screen on mobile and tablet layout. I want to do a slide from the side of the screen on mobile and tablet layout. Thanks.
-
Doing it all in one CSS is conflicting each other. Is there another options?
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with:
-
Ok, what I did to remove home is: ul.topnav li:not(:first-child) {display: none;} to ul.topnav li:not(none) {display: none;} and it worked. Now I go my image on the bottom of the menu. When I click the 3 buttons on the right the menu expands the image drops down with it. How can I stop that?
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with:
-
I am getting the hang of it. One question I am using this menu for the responsive: http://www.w3schools.com/howto/howto_js_topnav.asp On the mobile phones how can just use the 3 bars instead showing the home for the drop down?
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with:
-
Ok, I understand on that one. Since there different sizes of smartphone do I need to set each code for each size of screen (mobile)?
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with:
-
So you are saying that there is no need for 3 different styles?
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with:
-
Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body>
- 9 replies
-
- Responsive
- Menu
-
(and 2 more)
Tagged with: