Jump to content
mtechama

CSS Responsive Menu for Mobile Issues

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>

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

If i am not mistaken:

ul.topnav li:not(:first-child) {display: none;}

not(:first-child)
should be deleted.
Not sure if the li before the :not should be deleted.

Try that out =D

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...