The functionality of "Priority Nav" is compromised when a div is floated

I am currently utilizing the "Priority Navigation" design technique. This means that when the viewport width is reduced and there isn't enough space for all the list-items to fit horizontally, they are moved into another nested list under a "more" link for easy access.

In my example (linked below), this basic setup works well:

http://codepen.io/moy/pen/RrRJBe

However, I have encountered some issues:

1) Due to another item floating alongside the navigation, I had to set overflow:hidden; on the nav. While this keeps the navigation aligned with the other content, it also hides the dropdown menu at the end because of the overflow property.

Are there any alternative CSS solutions for this problem?

2) Another issue arises when trying to position the nav links to the right by floating the div right. This causes performance issues, possibly related to script calculations regarding widths. Floating either the nav or its parent breaks the page!

The current setting of floating list-items left for horizontal display led me to experiment with using display:inline-block and text-align:right; for proper positioning. However, with limited space, the items either wrap or collapse into the "more" link altogether instead of gradually.

-

Browser compatibility: It is important to note that my browser support extends to IE8+, ruling out flexbox as a solution. Even if it were viable, finding a workaround for IE8/9 would be necessary.

If anyone has suggestions or knows of a plugin worth exploring, I would greatly appreciate the assistance. The script functions smoothly when the navigation is standalone, but integrating it with another item presents challenges. In a previous attempt, I calculated the width of the obstructing item and adjusted available space accordingly. However, this approach lacks flexibility - perhaps there is a better method?

Thank you in advance for any help offered!

javascriptjquerycsshtmlresponsive-design

Answer №1

Section 1

A great alternative to using overflow: hidden is to implement the clearfix technique.

To utilize this method, simply include the following code within the parent element that contains the nav:

.wrap:before, .wrap:after {
    content: '';
    display: table;
    clear: both;
}

If compatibility with IE8 is crucial, you can opt for the following approach by adding an additional element at the end of the parent container holding the nav:

html
<div class="clear"></div>

.clear {
    clear: both;
}

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

Creating a GIF file using Node.js leads to a corrupted image

I have been experimenting with creating a simple GIF. I followed the example provided in this NPM library for guidance. Despite my efforts, every time I generate the GIF, it appears as a corrupted image file. CODE const CanvasGifEncoder = require('ca ...

javascriptnode.jsnpmgif

Update the display immediately upon a change in the state

In my app.js file, the code looks like this: export const App = () => { const [selectedMeals, setSelectedMeals] = useState<string[]>(["allItems"]); const onCheckHandler = (e: any) => { const checkedValue = e.target.value; if (e.targ ...

javascriptreactjsrerender

Ways to prevent the input value from rising on a number type input when the up button is pressed

I'm curious about whether it's possible to prevent the input value from increasing when I press the up button on a type number input. Any ideas? ...

jqueryhtml

Troubleshooting: jQuery AJAX failing to receive JSON data in HTTP request

Experimenting with HTML and jQuery to practice JSON requests, I conducted some research and attempted a small test. However, upon running the script in Google Chrome, only my HTML/CSS elements appeared instead of expected results. Below is the code snippet ...

javascriptjqueryajaxjson

What is the process for linking an HTML form to an API using Express?

How can I establish a connection between an HTML form and an API using Node.js with Express? This is what my form looks like: <form action="/api" id="myform" method="GET"> <fieldset id="question-set1" cl ...

htmlnode.jsexpress

Unable to modify the chosen option within a select dropdown

I am trying to change the selected option of a select element using jQuery, but I can't seem to make it work. Here is the code I have: $("#ID option[value=grpValue]").prop('selected', 'selected').change(); If I manually type in a ...

javascriptjqueryhtml-select

Definition of a Typescript Global.d.ts module for a function that is nested within another function

Simply put, I have a npm module that exports a function along with another function attached to it: // @mycompany/module ... const someTool = (options) => { // do some cool stuff }; someTool.canUseFeature1 = () => { return canUseSomeFeature1(); ...

javascripttypescript.d.ts

Tips for transferring an array variable into a div element using AJAX

I have a div like the following: <div id="#myid"> if($values){ echo "<p>$values['one']</p>"; echo "<p>$values['two']</p>"; } </div> Due to the large size of my div, I want to make a request ...

javascriptjqueryangularjsajax

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, the ...

javascriptjqueryhtmlcss

Having trouble fetching the value with the designated ID

I'm encountering an issue with retrieving a value using an id. In my code, I have it set up like this: view <input type="text" value="<?php echo $add->class;?>" name="cls_<?php echo $add->id;?>" id="cls_<?php echo $add->id ...

javascriptphpcodeigniter

Issues persist with Ajax form submissions; the submitted data never seems to go through

I have encountered variations of this issue multiple times, but despite analyzing numerous examples, I am unable to determine why my code is not functioning properly. <script> $('document').ready(function(){ $('datafixForm' ...

javascriptphpjqueryajaxforms

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

The $watchCollection function will consistently have the identical object assigned to both the new and old values

When using $watchCollection to monitor an object, how can I determine which property of the object has been changed? The problem I am facing is that in the callback function, the new and old values are both the same objects. Is there a way to watch an obje ...

jqueryangularjs

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

javascriptjqueryhtmlcssangularjs

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

Is there a way to safely attempt to connect to SignalR with intervals between attempts until the connection is established? Also, does anyone have advice on how to handle the different stages of connectivity to the web sockets effectively? We are utilizin ...

javascriptnode.jsangulartypescriptsignalr

Strange rendering issues when using the react material-ui dialog

Exploring the Project Recently, I developed a front-end project focusing on a delivery service using React and Material UI. One interesting feature I added was a Dialog window that pops up when users click on an item, allowing them to customize it. Here i ...

javascriptreactjsmaterial-uireact-hooksrendering

Tips for successfully sending an interface to a generic function

Is there a way to pass an interface as a type to a generic function? I anticipate that the generic function will be expanded in the future. Perhaps the current code is not suitable for my problem? This piece of code is being duplicated across multiple fil ...

javascriptreactjstypescript

What steps can be taken to customize this code in order to develop a dictation application?

Currently, I have a code that functions by comparing two strings: str2 (which represents user input) and str1 (our reference string). The purpose is to determine whether any words in str2 are spelled correctly or incorrectly. So far, the code works well. H ...

javascripthtml

Using Vue's $emit method within a Promise

I am currently working on an image upload feature that is based on a Promise. Within the "then" callback, I am attempting to $emit an event named 'success'. Although my VueDevTools shows me that the success event has been triggered, the associate ...

javascriptvue.jspromise

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

htmlcssfont-size