Header not responsive - html

Question

Dear all i am beginners in Foundation and i am stuck in my code in medium device...i need your suggestion so that i can find my mistake:-below is my code:-
<div class="row">
<div class="large-6 medium-6 small-8 columns">
<ul class="dropdown menu" data-dropdown-menu>
<li class=" " id="logo"><img src="img/home/logo/logo.png"></li>
<li class=" ">Home - Payment Result - contact information</li>
</ul>
</div>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium" >
<a id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a>
<!-- <button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title"></div>-->
</div>
<div class="top-bar" id="main-menu" >
<div class="top-bar-right large-5 medium-6 small-4 columns" >
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li>How does it work</li>
<li>My order</li>
<li><span class="icon-cart"></span></li>
<li class="has-submenu">
<span class="icon-face"></span>
<ul class="submenu menu vertical" data-submenu>
<li>Pistachios</li>
<li>Pistachios</li>
<li>Pistachios</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
[please click on screenshot]
enter image description here

Answer 1

Your issue here is that the iPad is a large device and a medium device.
Zurb's documentation says:
Small: any screen.
Medium: any screen 640 pixels or wider.
Large: any screen 1024 pixels or wider.
The iPad's 'CSS resolution' (what the media queries work to) is 1024px x 768px, despite an actual resolution of 2048px x 1536px for the later versions.
So portrait is medium and landscape is large.
So in your above code medium-* will NOT be the visible structure on the iPad and .title-bar WILL, in landscape and vice versa in portrait. So you either have to:
If you're using CSS; create a new breakpoint for the iPad (this is a good resource:
CSS-Tricks - device media queries)
Or, if you're using SASS, you can reuse the mixin in the standard
Foundation SASS package to create specific CSS in a similar way to (1):
#media screen and #{breakpoint(768px)} and #{breakpoint(1024px down)} {
//iPad CSS here
}
Treat it as a large & medium device and change your HTML
.top-bar isn't really part of the grid system either, you have .top-bar-left and .top-bar-right but I'm not sure how much you can control these with columns and rows.
So this might work for you (but it doesn't control the width of left and right sections):
<div class="row">
<div class="large-6 medium-6 small-8 columns end">
<ul class="dropdown menu" data-dropdown-menu>
<li class=" " id="logo">
<img src="img/home/logo/logo.png">
</li>
<li class=" ">Home - Payment Result - contact information</li>
</ul>
</div>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<a id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a>
<!-- <button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title"></div>-->
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<p class="show-for-large-only">
ERROR
</p>
</div>
<div class="top-bar-right">
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li>How does it work</li>
<li>My order</li>
<li><span class="icon-cart"></span></li>
<li class="has-submenu">
<span class="icon-face"></span>
<ul class="submenu menu vertical" data-submenu>
<li>Pistachios</li>
<li>Pistachios</li>
<li>Pistachios</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
A JSfiddle of this code