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

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

What is the best method for scrolling down a JavaScript table using Selenium in Python?

My dynamic table is created using JavaScript. When the page loads, only the first elements are visible in the source code. This means that when I try to scrape values from the table, only the initial parts are retrieved. Before scraping, I need to scroll ...

javascriptpythonseleniumweb-scraping

Following the upgrade to version 6.3.3, an error appeared in the pipe() function stating TS2557: Expected 0 or more arguments, but received 1 or more

I need some assistance with rxjs 6.3.3 as I am encountering TS2557: Expected at least 0 arguments, but got 1 or more. let currentPath; const pipeArgs = path .map((subPath: string, index: number) => [ flatMap((href: string) => { con ...

javascriptangularrxjs6

Display the two values of an object pair using ng-repeat in AngularJS

I have an array of objects structured like this: myCtrl.siteNameLabels = myCtrl.actual.map(function (value, index) { return { actualSite: { actualSiteName : value, actualSiteData: myCtrl.tableData[index] }, ...

javascriptarraysangularjs

Issue encountered while retrieving information from XML file through AJAX

I am facing an issue while using AJAX to fetch data from an external XML file. The error I receive is "Invalid argument" and I am working with IE 8. Below is the code snippet: var xhr; xhr = new XMLHttpRequest(); xhr.open("GET","C:/Users/abc/Desktop/Pr ...

javascriptxmlajax

Creating a Star Rating System Using HTML and CSS

Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistanc ...

javascripthtmlcsssalesforcevisualforce

The log indicates that there are two distinct IP addresses associated with the user

I find that this question may be better suited for another Stack Exchange board, and I am open to migrating it there if needed. In the development of a web application, we record certain event information to assist in diagnosing any potential issues. One ...

javascriptphpajaxipip-address

Identifying the parent div in jQuery based on a specific class condition

I have a few different posts that resemble the following ("example" being the post content): <div class="example"> <p><a href="">example</a></p> <span class="thumbs-rating-up thumbs-rating-voted" onclick="thumb ...

jquery

What steps can be taken to enable users to draw a path on a Google Map?

I'm working on a new project for a Facebook app that will allow users to map out their marathon route using Google Maps. I plan to utilize mySQL database records to store fixed points along the path (such as specific locations based on latitude and lo ...

phpjavascriptmysqlfacebookgoogle-maps

Collaborate on React-Native components together!

As a newcomer to the world of react, react-native, and nodejs, I embarked on creating my own node module using npm init. Within this module, I developed a component for styling buttons, packaging it with npm pack and linking it in my application's pac ...

javascriptnode.jsreact-native

What is the best way to create separation between the href attribute of an a tag and the

Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...

cssreactjsmaterial-ui

Invoking a static method within a cshtml document

I am currently working on implementing a clickable DIV within a vertical tab panel. My goal is to have a specific static method called when the DIV is clicked. Here is what I have done: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ...

javascripthtml.netrazor

Tips for accessing the next sequential tag that is similar in HTML with the help of jQuery

I have generated the following HTML code from some plugins. <div class="parent"> <span>item1</span> <input type="hidden"></input> <span>item2</span> <span class="active">item3</span> <inpu ...

javascriptjquery

How to effectively send data from jQuery to PHP

I've been trying to figure out how to pass a value from jQuery to PHP. I've come across similar codes, but none of them seem to work for me. Every time I use alert, it shows the value of the variable, but when I open the site, there is nothing th ...

phpjquery

Submitting a page with PHP, Ajax, and JSON

Need help with making an Employee search functionality in my business using Ajax. After submitting the form, I want to load employee details using jQuery-based Ajax. Here is the code for searching employees. The problem I'm facing is that after submi ...

phpjqueryajax

Enhance your Angularfire experience with $firebaseArray by enabling dynamic counting and summing

Is there a way to dynamically count certain nodes if they are defined? The current implementation requires explicitly calling sum(). app.factory("ArrayWithSum", function($firebaseArray) { return $firebaseArray.$extend({ sum: function() { var ...

javascriptangularjsarraysfirebaseangularfire

What is the best way to send a 102 Processing status code in Express?

I'm in the process of configuring a new HTTP server to run a lengthy command and return the output of that shell command back to the client. Currently, I am using Express v4.17.1. However, requests from clients are consistently timing out when runnin ...

javascriptnode.jsexpress

Issue with Vue JS function not providing the desired array output

I declared a property in my data model like this: someArray: [] A function returns an array: getMyArray: function (someId) { var result = [7, 8, 9, 10]; return result; } I'm assigning the result of the function to m ...

javascriptvue.js

Back up and populate your Node.js data

Below is the Course Schema I am working with: const studentSchema = new mongoose.Schema({ name: { type: String, required: true }, current_education: { type: String, required: true }, course_name: { ...

javascriptnode.jsmongodbnpmmongoose

Tips for shutting down a modal box without using the "x" button?

I'm currently working on creating a modal box using HTML and Javascript, and I came across this example (reference https://www.w3schools.com/howto/howto_css_modals.asp), which seems to fit my needs quite well... I made some modifications to it... &l ...

javascripthtmlmodal-dialog