FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items.

.flexnav li {
    .
    .
    .
    width: 20%;
}

However, in my menu, the text lengths of the top-level menu items vary and the child elements (level 2) are wider than their parents. I am attempting to make the menu more flexible so that defining the width of the top-level menu items is not necessary. Unfortunately, without a fixed width, the menu does not function correctly. Any suggestions?

javascriptjquerycss

Answer №1

Check out the following code snippet:

<script type="text/javascript">
$(document).ready(function(){
    $(".flexnav").flexNav({ 'calcItemWidths' : true });
});
</script>

<ul class="flexnav" data-breakpoint="800">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li>Menu Item 5</li>
    <li>Menu Item 6</li>
</ul>

If you enable the calcItemWidths option to true, the plugin will automatically compute the width of each menu item.

Answer №2

Avoid excluding the widths on parent elements; FlexNav is designed to automatically wrap long children:

On a related note, it's best in terms of user experience to keep menu item names relatively short.

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

Obtain the value of an element from a React UI Material component (e.g. ListItemText)

Incorporated an onClick() event where a function is invoked to retrieve and display the value of any clicked element within the HTML body in a web component. <div id="root" onclick="handleClick(event)"></div> This snippet o ...

javascriptreactjsmaterial-ui

Having trouble with React MaterialUI <ListItemSecondaryAction> getting stuck while dragging within a react-beautiful-dnd Draggable?

I am currently utilizing react-beautiful-dnd to create draggable list items with the help of Material UI ListItems. Each of my ListItems consists of a ListItemText and a ListItemSecondaryAction which acts as a target for triggering a context menu (enclosi ...

javascriptreactjsmaterial-uireact-beautiful-dnd

Is it necessary to have col-xs-12 in Bootstrap 3?

In order to achieve the desired display for different screen sizes, we have implemented the following code: <div class="col-md-6">left</div> <div class="col-md-6">right</div> When viewed on smaller screens than md, this code succe ...

csshtmltwitter-bootstrap

Error message: Unable to access properties of undefined object (reading 'authorization')

This is a snippet of code that handles user authentication and authorization const bcrypt = require("bcryptjs"); const jwt = require("jsonwebtoken"); const userRepository = require("../repositories/userRepository"); const SALT ...

javascriptnode.jsjsonexpresssequelize.js

Grouping object properties in a new array using Java Script

I'm currently learning Java script and attempting to merge an Array of objects based on certain properties of those objects. For instance, I have the following array which consists of objects with properties a, b, c, pet, and age. I aim to create a n ...

javascriptarraysobjectarraylist

Bump the version number and request a message for the commit

Recently diving into the world of Grunt, I've been experimenting with merging grunt-bump and grunt-prompt. My intention is to have users prompted for a commit message that will then be added to the commit. I looked to this article for guidance in str ...

javascriptnode.jsgitgruntjs

Utilizing VueMq for personalized breakpoints and module inclusions

In my main app.js, I set and define breakpoints by importing the VueMq package. import VueMq from 'vue-mq'; Vue.use(VueMq, { breakpoints: { xsmall: 500, small: 768, medium: 1024, large: 1360, x ...

javascriptvue.jsimportvuejs2

Incorporate v-if to target a particular item within a v-for loop

On my Vue page, I have the following HTML code snippet: <div v-for="profile in lab.profiles" v-if="edit || profile.active" class="lab-tests-row-div" @mouseover=""> <div class="clickBox" :class="['clickBox-' + lab.id + ' ...

javascriptvue.jsjavascript-frameworkv-for

Tips for modifying environment variables for development and production stages

I am looking to deploy a React app along with a Node server on Heroku. It seems that using create-react-app should allow me to determine if I'm in development or production by using process.env.NODE_ENV. However, I always seem to get "development" ev ...

javascriptnode.jsreactjsenvironment-variables

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

htmlcssbootstrap-modalbootstrap-4

Content in React Router may fail to load when refreshing the page, navigating forward, or manually

I recently started using React and I'm getting familiar with React Router. I divided my application into two main routes because each uses a different style: the Splash path is for when the user first enters, which contains the Splash screen, Login, a ...

javascriptreactjsreact-router

Using Ajax and jQuery to redirect a page with values in ASP.NET

I have two pages: Default.aspx and DetailView.aspx. My goal is to redirect from Default.aspx to DetailView.aspx using an AJAX call and pass a value as well. Although I have tried something, the function defined in the class is not being called. The functi ...

javascriptc#jqueryasp.netajax

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

javascriptjqueryhtmlcsssvg

Locate a button element and dynamically assign an identifier using jQuery or JavaScript

I am currently working on a webpage that contains two forms, both enclosed within a <DL> element. <dl> <form action="" method="POST" style="display:inline-block;"> <dl><dt></dt><dd><input class="submit" typ ...

javascriptjqueryhtml

Utilizing the JavaScript Array.find() method to ensure accurate arithmetic calculations within an array of objects

I have a simple commission calculation method that I need help with. I am trying to use the Array.find method to return the calculated result from the percents array. The issue arises when I input a price of 30, as it calculates based on the previous objec ...

javascripttypescript

Why do I keep encountering a null window object issue while using my iPhone?

Hey there! I've got a React game and whenever the user loses, a new window pops up. const lossWindow = window.open( "", "", "width=500, height=300, top=200, left = 200" ); lossWindow.document.write( & ...

javascriptreactjsiphonesafari

How to add 1 to the final element in a JavaScript

I'm currently working on a task that involves incrementing the last element in an array using pop() and push(). However, I'm facing an issue where the original values are being retained after I try to increment the popped array. The objective is ...

javascriptarrays

Struggling with grasping the concept of promises in AngularJS

I encountered a challenge while working with AngularJS & REST. My data service was not returning data in time for my model to use, despite implementing a promise. I would greatly appreciate any assistance from those more knowledgeable on this matter. In ...

javascriptangularjsrestangular-promise

Move the DIV element to a static section within the DOM

In my Vue app, I have implemented methods to dynamically move a DIV called 'toolbox' to different sections of the DOM. Currently, the DIV is positioned on the bottom right of the screen and remains static even when scrolling. My goal is to use t ...

javascriptcssvue.jspositioncss-position

Data sent through AJAX messaging is not being acknowledged

I recently made an AJAX request and set it up like this: $.ajax({ data : { id : 25 }, dataType : 'json', contentType : 'application/json; charset=utf-8', type : 'POST', // the rest of the ...

javascriptphpjqueryajaxjson