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

There is no need for three seperate CSS files. It can all fit into one file


And with a Mobile First design, you can reuse or modify content.
Small example:


a {
color: green;
}

a:hover {
color: red;
}

 

div, main, aside {
display: inline-block;
box-sizing: border-box;
}

 

.container {

width: 100%
}

main {
width: 100%;
border-bottom: 2px solid black;
}

aside {
width: 100%;
}


/* TABLET VIEW */

 

@media (min-width: 680px) and (max-width: 999px) {

 

main {

width: 70%;
border-bottom: none;
}

aside {
width: 30%;

border-left: 2px solid black;
}

 

 

}

 

 

 

@media (min-width: 1000px) {

.container {

width: 80%;
margin: auto;

}

}

 

 

 

-------------------------

 

As for a smartphone navigation, it is better to create a Desktop first navigation, and then use Smartphone nav CSS.
Remember: CSS gets read from top to bottom.


a {
color: red;
}

a {
color: blue
}

Will result in a blue color.
Since the second will override the first.

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?

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?

Technically you can. But most of the time you will only use three different styles and use width: xxx%, so it adjust to the screen width.

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)?

There is no need for three seperate CSS files. It can all fit into one file


And with a Mobile First design, you can reuse or modify content.
Small example:


a {
color: green;
}

a:hover {
color: red;
}

 

div, main, aside {
display: inline-block;
box-sizing: border-box;
}

 

.container {

width: 100%
}

main {
width: 100%;
border-bottom: 2px solid black;
}

aside {
width: 100%;
}


/* TABLET VIEW */

 

@media (min-width: 680px) and (max-width: 999px) {

 

main {

width: 70%;
border-bottom: none;
}

aside {
width: 30%;

border-left: 2px solid black;
}

 

 

}

 

 

 

@media (min-width: 1000px) {

.container {

width: 80%;
margin: auto;

}

}

 

 

 

-------------------------

 

As for a smartphone navigation, it is better to create a Desktop first navigation, and then use Smartphone nav CSS.
Remember: CSS gets read from top to bottom.


a {
color: red;
}

a {
color: blue
}

Will result in a blue color.
Since the second will override the first.

So you are saying that there is no need for 3 different styles?

First of all i would strongly suggest using a single CSS file and try to work Mobile First.

This means:

First write your CSS for your Mobile Viewport.
Then for tablets
Then for desktops

 

This makes it easier (as for example your color for certain div tags and a tags will be the same, width most likely varies)


EXAMPLE:


CSS code mobile

@media (min-width: 680px) and (max-width: 999px) {
CSS code tablet

}

 

@media (min-width: 1000px) {
CSS code desktop
}




I have noticed that the device-width of iPhone 6 is 375px, and of iPhone 6 Plus is 414px.
Both are larger than your max width, so it would give the Tablet view.
Try right clicking and look at your code (or in short: F12) in Chrome, the settings applied might hint which stylesheet got applied.



Off topic:
Try to use

<meta name="description" content="DESCRIPTION OF THIS PAGE">

This will be the description given under the title of your page when you appear on a search engine. And it boosts your SEO


I hope this helps =D

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>