Jump to content

CSS Responsive Menu for Mobile Issues


mtechama

Recommended Posts

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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Edited by mtechama
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...