Header unresponsive to user interactions

Hey everyone! I'm new to using Foundation and I've hit a roadblock in my code on a medium-sized device. I would greatly appreciate your input to help me identify my mistake. Below is the snippet of 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"><a href=""><img src="img/home/logo/logo.png"></a></li>
            <li class=" "><a href="#">Home - Payment Result - contact information</a></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>   
    </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><a href="#">How does it work</a></li>
                <li><a href="#">My order</a></li>
                <li><a href="#"><span class="icon-cart"></span></a></li>
                <li class="has-submenu">
                    <a href="#"><span class="icon-face"></span></a>
                    <ul class="submenu menu vertical" data-submenu>
                        <li><a href="#">Pistachios</a></li>
                        <li><a href="#">Pistachios</a></li>
                        <li><a href="#">Pistachios</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

[For reference, please click on the screenshot provided]

Click here for image description

htmlcsszurb-foundation

Answer №1

Your problem lies in the fact that the iPad is considered both a large and a medium device.

According to Zurb's documentation:

Small: any screen size.

Medium: any screen 640 pixels or wider.

Large: any screen 1024 pixels or wider.

Despite having an actual resolution of 2048px x 1536px, the CSS resolution for the iPad is 1024px x 768px. This means that in portrait mode it falls under the medium category, while in landscape mode it falls under large.

In your code snippet, medium-* elements will not be visible on the iPad in landscape mode, while .title-bar will be visible. The opposite holds true for portrait mode. To address this issue, you can:

  1. Create a new breakpoint specifically for the iPad if you're using CSS (you can refer to resources like CSS-Tricks - device media queries)

  2. If you're using SASS, utilize the mixin from the Foundation SASS package to create custom CSS breakpoints for the iPad:

    @media screen and #{breakpoint(768px)} and #{breakpoint(1024px down)} {
      //iPad-specific CSS here
    }
  3. Alternatively, treat the iPad as both a large and a medium device and adjust your HTML accordingly.

Additionally, note that .top-bar does not integrate with the grid system effectively. While you have .top-bar-left and .top-bar-right, controlling these elements using columns and rows may be limited.

A potential solution that accounts for this limitation is as follows (though it does not regulate 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">
        <a href=""><img src="img/home/logo/logo.png"></a>
      </li>
      <li class=" "><a href="#">Home - Payment Result - contact information</a></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><a href="#">How does it work</a></li>
        <li><a href="#">My order</a></li>
        <li><a href="#"><span class="icon-cart"></span></a></li>
        <li class="has-submenu">
          <a href="#"><span class="icon-face"></span></a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">Pistachios</a></li>
            <li><a href="#">Pistachios</a></li>
            <li><a href="#">Pistachios</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

For a live example of this code, check out this JSfiddle link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Optimize the size of div elements using jQuery

I am looking for a way to minimize certain div elements on my webpage using symbols from font-awesome instead of the traditional "-" and "+". However, I am having trouble inserting the classes of the icons into my code. I attempted replacing the .html meth ...

jqueryhtmlminimize

Angular17+ introduces a new feature called the Dynamic Tag Class, providing

Why isn't my navigation bar updating when the page changes? Here is my app.component.html code: <html> <app-navbar></app-navbar> <router-outlet></router-outlet> </html> This is where my navbar.component.html s ...

htmlangularclassdynamictags

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

javascriptjqueryhtmlcsshtml5-video

When a jQuery checkbox is checked, the addClass and toggleClass effects are applied to all DIVs, not just the enclosing DIV

I am working with Bootstrap Cards that have checkboxes inside them. When a checkbox is checked, I want to apply 2 specific classes to the Card DIVs: Change class="card border-secondary" to class="card border-success" Change class="card-header" to class ...

javascriptjquerycssbootstrap-4

What is the best way to utilize Angular to conceal an image until it is fully loaded?

I am currently utilizing angularjs to dynamically generate images. My goal is to hide or show a placeholder for each <img> element until it fully loads. Is it possible to achieve this directly in my html, or should I handle it through the controlle ...

javascripthtmlangularjs

Is there a way to prevent HTML rendering with Javascript within a JSP page?

When a user accesses our site from China, we need to block certain assets to optimize the speed of the site. For example, resources from Facebook need to be blocked from loading altogether. The challenge is that this task must be accomplished using JavaSc ...

javascripthtmljsp

What is the best way to apply padding to the left and right of ::webkit-scrollbar-thumb?

Is there a method to mimic the unique scrollbar design used on YouTube? Desired appearance: https://i.sstatic.net/iSoTd.png It appears that utilizing ::webkit-scrollbar-thumb with left and right padding can help achieve this look. I have experimented w ...

htmlcsssassscrollbar

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

Using Selenium in Python, identify and choose a class

Hello, I am currently working on automating a process using selenium, python, and GLPI. I have been struggling with selecting a user from a menu bar, despite trying various methods like linkText, cssSelector, and xpath. I suspect I may be doing something w ...

pythoncssseleniumwebdriver

Send the completed form to a designated web address

Here's the form I'm working with: @using (Html.BeginForm("Search", "Home", FormMethod.Get, new { enctype = "multipart/form-data", @class = "navbar-form navbar-left form-inline", @role = "search" })) { var numberOfVi ...

c#htmlasp.net-mvcforms

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

Which is quicker, generating a gradient using CSS or directly loading an image?

I am curious about the potential benefits of the new CSS3 styling techniques. However, I am unsure if the effort is worth it! (Question: Can jQuery be used to apply a vignetting effect to a webpage?) Appreciate any insights! ...

jqueryimagecsseffects

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Ways to eliminate excess white space or margins on the right-hand side of a webpage

After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled ...

htmlcssbootstrap-4

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

The connection between the layout of dropdown menus and the way data is handled in forms

I have discovered three different methods for creating dropdowns that can be used in forms: 1) Utilizing HTML with "form-dedicated" attributes such as select and option value="" 2) Implementing the Bootstrap framework with div classes like "dropdown", Butt ...

javascripthtmlcsstwitter-bootstrap

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...

javascripthtmlangulartextareainput-field

Update the loading animation to utilize a custom image instead

I found a preloader code on this website that rotates fontawesome icons and displays the percentage after a few seconds. However, I am looking to replace the fontawesome icon with an image but have been unsuccessful in my attempts. Is there a way to easil ...

htmljquerycssfont-awesomepreloader

Make desktop view the default even when accessing from a mobile device

I have searched through all other similar questions but have not been able to find a solution. I am new to programming and am currently learning CSS. I have created a webpage with the following code: <html> <style> body { p.Welcome { ...

htmlcss