The navigation element in Foundation 4 is not showing up properly on an iPhone

After adding a <nav class="top-bar"> element to my webpage, I noticed it displayed correctly on desktop computers but appeared as a solid black bar with no menu items when viewed on an iPhone. This issue seems to be specific to the top section of my navigation.

<nav class="top-bar" style="">
  <ul class="title-area">
    <li class="name"></li>
  </ul>

<section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown not-click"><a href="#">Orders</a>
        <ul class="dropdown"><li class="title back js-generated"><h5><a href="#">« Back</a></h5></li>
          <li class=""><a href="orders/new.php">Create New</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
csszurb-foundation

Answer №1

To fix the issue, simply delete the height attribute from your CSS:

.top-bar .name {
    height: 45px;
}

The specified height was causing the <li> element to display below the <nav> container. Since overflow:hidden was also set, the <li> was not visible on the page.

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

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

Is there a way to create unique animations for CSS drop down div

I've been attempting to implement a hover effect on my drop-down cart that makes it fade or slide up similar to submenus. But, CSS transitions are not my forte! I've tried using generic fades with the transition property, but no luck. Currently ...

htmlcsstwitter-bootstrapbootstrap-4

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

cssnode.jsiterationstyluscss-animations

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

javascriptjqueryhtmlcss

Creating a dynamic background image for the ul/li div element

As a newcomer to website development, I am currently exploring how to dynamically set images in the ul/li elements within a div. Below is a snippet of the HTML code I have been working on: <div class="results"> <ul class="row"> < ...

javascriptjqueryhtmlcss

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

javascriptcsstwitter-bootstrapvue.jsnuxt.js

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

Getting rid of unnecessary compiled CSS files in Compass

After making changes to files and running compass compile, the compiled files remain even if they are renamed or deleted. Similarly, compass clean does not remove these old files as it only focuses on cleaning up current files in use. I want to avoid compl ...

csssasscompass-sass

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

I need help with saving a to-do list in HTML so that it persists even after refreshing the browser. Can anyone assist me? html <!DOCTYPE html> <html> <head> <title>My To-Do List</title> <link rel="sty ...

javascriptjquerycsshtml

Vanilla JavaScript: toggling text visibility with pure JS

Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...

javascripthtmlcss

Each Browser Approaches Simple Search Fields in its Own Unique Way

In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11. Chrome – the preferred version https://i.sstatic.net/ikBgD.png Firefox https://i.sstatic.net/9lcqQ.pn ...

htmlcsssvgcross-browser

What could be causing the calendar icon to not display in the table cell?

I've been working with the Bootstrap date picker inside a table, and I'm having trouble getting the date picker icon to display using the fas fa-calendar-alt css class. <td> <input type="text" id="expirydate{{$index}} ...

htmlcssangularjsdatepickerfont-awesome

Prevent the parent component's ripple effect from being activated by the child component

If I have a simple code snippet like the following: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button ...

javascriptcssreactjsmaterial-uidom-events

The Material-UI TextField is placed in the Header section of the page

As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library. This is my first time creating a header with CSS. Are there any specific cod ...

cssreactjstypescriptmaterial-ui

Is it possible to create a navigation list that includes bullets and changes background color using only CSS?

When adding a bullet image to each navigation li element, the typical method involves using the background property. However, if we want to include a background change as well, it is necessary to ensure our anchors inside li have "display:block;" set. Is ...

csshtml-lists

CSS Hover Effect Not Resizing Image

I've been struggling to incorporate a hover effect into my responsive image grid. I want the image to have a dark overlay and fade in some text when hovered over, but I can't seem to make it work. Take a look at my HTML structure: <div class ...

htmlcssimagehoveroverlay

Show one line of text at a time with a pause in between each one

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

jqueryhtmlcssjquery-plugins

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

htmlcsshtml-table

delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below. I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button, meaning I want to remove the background-color and dot symbol. Code ...

htmlcss

Extra space at the beginning and inside the body div containers

Could someone please enlighten me on what my poor, foolish eyes are failing to see? I am experiencing whitespace at the top of my browser window and between two div tag containers in all browsers. I have tried setting margin: 0px; for p, body, html, ever ...

htmlcsswhitespace