Steps to activate hyperlinks in top bar dropdown menus in Foundation 6

After transitioning to Foundation 6, I encountered a hiccup while trying to build a top bar using an example from the documentation. It seems that the links on submenus are not working properly. Although I came across a related issue on github in this thread, I am still unsure about the correct way to handle submenu links in Foundation 6. The example I'm referring to from the documentation is not functioning as expected, with none of the links under the submenu working:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

I could really use some guidance on this topic!

Answer №1

After swapping out the foundation.js file (originally v6.0.1 from the official website) with v6.0.4 found on the foundation-sites GitHub repository, the hyperlinks are now functioning correctly. It appears that v6.0.4 has resolved this issue.

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

Fixed navigation menu at the top of the screen

Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make ...

Enhancing angular service with additional parameters

UPDATE: angular.extend and Object.assign both work fine, but which one is the better choice? I am facing an issue where adding more values to an angularjs service variable overwrites the previous value. Here is a sample code snippet: var testModule = ang ...

Issues with content overflow on smartphones

I have encountered a frustrating issue that is driving me crazy. As I make modifications to a website, everything appears to be wider than the 100% width of the page in certain cases. Even when adjusting the browser window size, the problem persists. Str ...

`Can you guide me on the proper path for designing this website layout?`

As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...

Dynamically changing CSS properties

http://jsfiddle.net/U6gWx/1/ $("div.ttt").css('display','block'); There is a filter that might empty the first column, which is set to float:left. When the first column is empty, I want to update the second column's CSS style to ...

How do you typically approach testing Cloud Code on Parse?

While working on developing a substantial amount of business logic in webhooks like beforeSave/afterSave/etc. using Parse.com, I have encountered some challenges as a JavaScript/Parse beginner. The process seems somewhat tedious and I'm questioning if ...

Switch the visibility of an HTML input styled as a "spinner"

I have managed to create a CSS-based method for toggling the visibility of span or input elements depending on whether a radio button is checked. I got inspired by this insightful question on Stack Overflow. However, I encountered an issue where this togg ...

I am experiencing some issues with my AngularJS JavaScript code. The root scope is updating correctly, but the other two scopes are not working as expected. Can

My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

Surprising Media Component Found in URL Parameters within the design

Exploring the page structure of my Next.js project: events/[eventId] Within the events directory, I have a layout that is shared between both the main events page and the individual event pages(events/[eventId]). The layout includes a simple video backgro ...

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

How can you implement a resource response approach in Express.js using an API?

As a newcomer in my journey with expressjs, I'm currently exploring its functionalities. In my controller, I've structured the response as follows: .... res.json({ 'data': { 'user': { 'id': us ...

eliminate the firebase firestore query using onSnapshot

Seeking assistance with the following code snippet: firebase.firestore() .collection("chatrooms") .doc(`${chatId}`) .collection(`${chatId}`) .orderBy("timestamp") .limit(50).onSnapshot((snapshot) => { //performing oper ...

Check for non-null Sequelize Where conditions

Suppose I need to execute a select command using Sequelize with the condition: WHERE ID=2134 However, if the user does not provide an ID, then the WHERE clause should be omitted (as it is null). What is the best way to handle this situation in Sequelize ...

VueJS - Display a v-html tag that is initially empty but will eventually show content determined by

I have created a recursive component that is capable of infinitely looping over its children At the top of this component is the following line, which serves as the first element within the Vue component: <component class="relative " :is="type || &apo ...

What could be causing the error when attempting to release this Node-MySQL pool?

My first attempt at utilizing connection pooling is with Node.js. I crafted a database connection module in Node.js to establish a single connection, which is then referenced within a pooling function for later use when passed to different modules. /* D ...

Converting important information from elements in an Array into a string separated by commas

Which lodash method or function is best suited for extracting the ids from the array below and creating a comma-separated string out of them? var myArray = [ { tag: 'wunwun', id: 132 }, { tag: 'davos&apos ...

How can I efficiently pass a JavaScript object to a function using jQuery syntax?

Recently, I've delved into the world of JavaScript and started exploring object orientation, prototyping, and using objects for all functions and variables. However, there is one aspect that many frameworks like jQuery or extJS have that I struggle wi ...

Is There a Sparse Array Element in JavaScript?

Is there a more efficient method to check for the presence of an array element within multiple layers of a structure? For example: if (typeof arr[a][b][c] === 'undefined') { ...do something... } If [a] or [b] are missing, we cannot accurately t ...