1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Strange behavior in media query

         

Gilead

5:07 pm on Jan 26, 2017 (gmt 0)

10+ Year Member



I'm working on a site in which the nav bar is too long for certain resolutions, so I thought I should combine the services into a drop down and give myself more room as the size shrinks down. At a certain resolution, the hamburger would appear to complete the media queries. Only it seems to be ignoring my presets for some reason. I haven't been working with media queries very long, so it might be my inexperience. This is the first multiple menu system I've done. Time for some code: 
<style>
#menu-bar 
 {
 width: 99.2%;
 margin: 0px 0px 0px 0px;
 padding: 6px 6px 4px 6px;
 height: 40px;
 line-height: 100%;
 border-radius: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 box-shadow: 2px 2px 3px #666666;
 -webkit-box-shadow: 2px 2px 3px #666666;
 -moz-box-shadow: 2px 2px 3px #666666;
 background: #8B8B8B;
 background: linear-gradient(top, #0D7884, #1C3F87);
 background: -ms-linear-gradient(top, #0D7884, #1C3F87);
 background: -webkit-gradient(linear, left top, left bottom, from(#0D7884), to(#1C3F87));
 background: -moz-linear-gradient(top, #0D7884, #1C3F87);
 border: solid 1px #6D6D6D;
 position:relative;
 z-index: 1;
 }
#menu-bar li {
 margin: 0px 0px 6px 0px;
 padding: 0px 6px 0px 6px;
 float: left;
 position: relative;
 list-style: none;
}
#menu-bar a {
 font-weight: bold;
 font-family: Frankfurt;
 font-style: normal;
 font-size: 18px;
 color: #31D231;
 text-decoration: none;
 display: block;
 padding: 6px 20px 6px 20px;
 margin: 0;
 margin-bottom: 6px;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
 margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
 background: #0399D4;
 background: linear-gradient(top, #EBEBEB, #A1A1A1);
 background: -ms-linear-gradient(top, #EBEBEB, #A1A1A1);
 background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
 background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
 color: #444444;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
 background: none;
 border: none;
 color: #666;
 -box-shadow: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#menu-bar ul a:hover {
 background: #0399D4 !important;
 background: linear-gradient(top, #04ACEC, #0186BA) !important;
 background: -ms-linear-gradient(top, #04ACEC, #0186BA) !important;
 background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
 background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
 color: #FFFFFF !important;
 border-radius: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar li:hover > ul {
 display: block;
}
#menu-bar ul {
 background: #DDDDDD;
 background: linear-gradient(top, #FFFFFF, #CFCFCF);
 background: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
 background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
 background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
 display: none;
 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 30px;
 left: 0;
 border: solid 1px #B4B4B4;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: 2px 2px 3px #222222;
 -moz-box-shadow: 2px 2px 3px #222222;
 box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
 float: none;
 margin: 0;
 padding: 0;
}
#menu-bar ul a {
 padding:10px 0px 10px 15px;
 color:#424242 !important;
 font-size:12px;
 font-style:normal;
 font-family:Frankfurt;
 font-weight: normal;
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
 border-top-left-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-right-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
 border-bottom-left-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-bottomleft: 10px;
 border-bottom-right-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#menu-bar {
 display: inline-block;
}
 html[xmlns] #menu-bar {
 display: block;
}
* html #menu-bar {
 height: 1%;
} 
#menu-bar2{display:none; }


@media only screen and (min-device-width : 300px) and (max-width: 1900px) and (orientation : portrait)
{
 #menu-bar{display:none; }
 #menu-bar2 
 {
 width: 99.2%;
 margin: 0px 0px 0px 0px;
 padding: 6px 6px 4px 6px;
 height: 40px;
 line-height: 100%;
 border-radius: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 box-shadow: 2px 2px 3px #666666;
 -webkit-box-shadow: 2px 2px 3px #666666;
 -moz-box-shadow: 2px 2px 3px #666666;
 background: #8B8B8B;
 background: linear-gradient(top, #0D7884, #1C3F87);
 background: -ms-linear-gradient(top, #0D7884, #1C3F87);
 background: -webkit-gradient(linear, left top, left bottom, from(#0D7884), to(#1C3F87));
 background: -moz-linear-gradient(top, #0D7884, #1C3F87);
 border: solid 1px #6D6D6D;
 position:relative;
 z-index: 1;
 }
#menu-bar2 li {
 margin: 0px 0px 6px 0px;
 padding: 0px 6px 0px 6px;
 float: left;
 position: relative;
 list-style: none;
}
#menu-bar2 a {
 font-weight: bold;
 font-family: Frankfurt;
 font-style: normal;
 font-size: 18px;
 color: #31D231;
 text-decoration: none;
 display: block;
 padding: 6px 20px 6px 20px;
 margin: 0;
 margin-bottom: 6px;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 text-shadow: 2px 2px 3px #000000;
}
#menu-bar2 li ul li a {
 margin: 0;
}
#menu-bar2 .active a, #menu-bar li:hover > a {
 background: #0399D4;
 background: linear-gradient(top, #EBEBEB, #A1A1A1);
 background: -ms-linear-gradient(top, #EBEBEB, #A1A1A1);
 background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
 background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
 color: #444444;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar2 ul li:hover a, #menu-bar li:hover li a {
 background: none;
 border: none;
 color: #666;
 -box-shadow: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#menu-bar2 ul a:hover {
 background: #0399D4 !important;
 background: linear-gradient(top, #04ACEC, #0186BA) !important;
 background: -ms-linear-gradient(top, #04ACEC, #0186BA) !important;
 background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
 background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
 color: #FFFFFF !important;
 border-radius: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar2 li:hover > ul {
 display: block;
}
#menu-bar2 ul {
 background: #DDDDDD;
 background: linear-gradient(top, #FFFFFF, #CFCFCF);
 background: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
 background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
 background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
 display: none;
 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 30px;
 left: 0;
 border: solid 1px #B4B4B4;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: 2px 2px 3px #222222;
 -moz-box-shadow: 2px 2px 3px #222222;
 box-shadow: 2px 2px 3px #222222;
}
#menu-bar2 ul li {
 float: none;
 margin: 0;
 padding: 0;
}
#menu-bar2 ul a {
 padding:10px 0px 10px 15px;
 color:#424242 !important;
 font-size:12px;
 font-style:normal;
 font-family:Frankfurt;
 font-weight: normal;
 text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar2 ul li:first-child > a {
 border-top-left-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-right-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-radius-topright: 10px;
}
#menu-bar2 ul li:last-child > a {
 border-bottom-left-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-bottomleft: 10px;
 border-bottom-right-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -moz-border-radius-bottomright: 10px;
}
#menu-bar2:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#menu-bar2 {
 display: inline-block;
}
 html[xmlns] #menu-bar2 {
 display: block;
}
* html #menu-bar2 {
 height: 1%;
} 

910 hamburger
 
} 
</style>
 <!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

 

 </head>
 <body>
 <nav>

 
<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="about.php">About</a></li>
  <li><a href="widgetcleaning.php">Widget Cleaning</a></li>
  <li><a href="upwidgetcleaning.php">Upwidget Cleaning</a></li>
  <li><a href="otherwidget.php">Other Widget</a></li>
  <li><a href="widgetrepair.php">widget Repair</a></li>
  <li><a href="testimonies.php">Testimonies</a></li>
  <li><a href="http://www.example.com/" target="_blank">Cleaning Supplies</a></li>
  <li><a href="contactus.php#">Contact Us</a></li>
 </ul>

<ul id="menu-bar2">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="about.php">About</a></li>
 <li><a href="#">Services</a>
   <ul>
   <li><a href="widgetcleaning.php">Widget Cleaning</a></li>
   <li><a href="upwidgetcleaning.php">Upwidget Cleaning</a></li>
   <li><a href="otherwidget.php">Other Widget</a></li>
   <li><a href="widgetrepair.php">Widget Repair</a></li>
   </ul>
 <li><a href="testimonies.php">Testimonies</a></li>
  <li><a href="http://www.example.com/" target="_blank">Widget Supplies</a></li>
  <li><a href="contactus.php#">Contact Us</a></li>
  </li>
</u>
</nav>

I wanted to get this part working before I added the hamburger. Do I add it to the secondary menu or make a new menu?
What am I missing? Is there a better way to do this? Thanks for the help guys!


[edited by: not2easy at 7:42 pm (utc) on Jan 26, 2017]
[edit reason] no site specifics please [/edit]

lucy24

7:23 pm on Jan 26, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@media only screen and (min-device-width : 300px) and (max-width: 1900px) and (orientation : portrait)
Frankly I'd reduce this whole thing to a simple 
@media screen and (max-width: some-number)
The less detail you put in the rule, the less chance there is for the device to misinterpret what you say. If there's more than one option, just keep the rules in the right order and you don't need to mess with min-width. I'd be especially leery of including "device-width" and "width" in the same specification, for fear of Unintended Consequences.

One option is to set a default 
#hamburger {display: none;}
and then override this once you get into the (max-width) area. Sure it's nice if you can make the same HTML do double duty-- one way for big devices, another way for smaller ones-- but it isn't always practical or even possible. On the larger scale of things, the extra weight of HTML is not very much compared to all the other things weighing a site down, like images or calls to offsite fonts.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026