CSS Navigation Bar Fails to Function Properly on Mobile Devices

Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview

The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device.

I suspect that the issue may be with the viewport settings rather than the CSS. Can anyone offer advice?

Here is the HTML code:

<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">

  <div class="header compact" role="banner">
    <div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
      <h2 ng-click="toggleMenu = true">Menu</h2>
      <div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
        <ul role="navigation" class="nav-main">
          <li class="active">
            <a href="../makani/" data-ga-event="Header,Navigate,Home">Home</a>
          </li>
          <li>
            <a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
              Challenge</a>
          </li>
        </ul>
        <ul role="contentinfo" class="nav-aux">
          <li>
            <a href="../makani/faq/" data-ga-event="Footer,Navigate,FAQ">FAQ</a>
          </li>
          <li>
            <a href="../makani/about/" data-ga-event="Footer,Navigate,About Us">About Us</a>
          </li>
        </ul>
      </div>
      <button type="button" ng-click="toggleMenu = false">Close</button>
    </div>
  </div>
</body>

Answer №1

Your CSS lacks any vendor prefixes, which are necessary even for iOS 8 compatibility. Ensure you include transform as well as -webkit-transform.

For further information, visit http://caniuse.com/#search=transform

By the way, great job on the menu design!

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

Do not display large numbers within an HTML card

I have https://i.sstatic.net/DkowD.png this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve ...

Updating the state using ui-router

The application consists of pages labeled as X, Y, and Z. The intended route is to navigate from page X to select details, then move onto page Y to select additional details, and finally land on page Z. I wish that upon clicking the window's back butt ...

Utilize jQuery to generate an HTML table from a JSON array with rows (Issue: undefined error)

please add an image description hereI am attempting to populate the data in an HTML table using jQuery, but all columns are showing as undefined errors HTML: <table id="example" class="table table-striped" style="width:100%&quo ...

Is your AngularJS basic test failing to run successfully?

While attempting to follow a tutorial using Notepad and Chrome, I encountered an issue with the code provided. Error: [ng:areq] Argument 'testhere' is not a function, got undefined http://errors.angularjs.org/1.3.15/ng/areq?p0=testhere&p1=no ...

Fixing the Bootstrap Datepicker: A Step-by-Step Guide

Is there a way to configure the Datepicker to display today's date and tomorrow's date? Click here for the JS file Check out the image on our website https://i.stack.imgur.com/VyFUB.jpg ...

Conceal the Angular alert message automatically after a specified number of seconds or when the page

I recently started working with Angular and managed to implement an alert message for password reset requests in our app: Usermodel: .service('userModel', ['$q', '$http', 'authorizedTracker', function($q, $http, au ...

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

Prevent Second Division from wrapping around floated Division

I am running into a minor issue with the positioning of a div in my current project. +------------------------+ |+-------+ ~~~~ TITLE| <--how can I prevent text from wrapping around || | ~~~~~~~~~~~~~ |\ on the left ...

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

What is the best way to automatically adjust the size of an image to fit its

One of the challenges with the parent container is fitting an image inside it: .parent { position: relative; text-align: center; overflow: hidden; display: flex; align-items: center; align-content: center; justify-content: cente ...

Divide HTML content based on headings

My HTML document has a structure similar to this: <h1><a id="first-id"></a>First header</h1> <h2>Foo</h2> <p>Some text</p> <h3>Bar 1</h3> <p>Some text</p> <h3>Bar 2< ...

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

Tips on how to horizontally align an icon and text using Material UI

As a newcomer to Material UI, I am facing an issue where my icon and text are not aligned: What I'm aiming for: This is the code I have so far: <div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', Bo ...

Modify the scrolling functionality to ensure that fixed elements remain visible even on smaller screens

I am facing an issue with a fixed div on my webpage. When the height of the div exceeds the viewport height of the browser, I am unable to scroll within the div itself as the background scrolls instead (due to the position being fixed). For example: < ...

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

Is the PHP configuration correct for Apache on your local server?

I'm currently facing an issue with connecting to a MySQL server in order to retrieve data for a flash application using PHP. I created a test .php file to check if everything is working correctly: <html> <body> <?php $link = mysql_con ...

The compatibility of Datatables responsive feature with ajax calls appears to be limited

I recently started using the datatables plugin and have encountered an issue with responsive tables. While I successfully implemented a responsive table and an AJAX call on a previous page, I am facing difficulties with it on a new page for unknown reasons ...

The ng-repeat directive is failing to render the list item within the anchor tag

Here is the HTML code as seen in the text editor... <div ng-repeat="x in Result"> <a ng-href="https://domain.com/{{x.short_url}}"> <li class="viewer" id="{{x.user_id}}" style="background-image: url(https://domain.com/{{x.user_id}} ...

Adapting the Homepage Based on User Authentication

Currently, I am working on a website where I am implementing a login feature. Once the user logs in successfully, they should be redirected to the index page and see something other than the login button. I have been using the following code for my implem ...