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

Enter information to accompany your images in the description box

After browsing through numerous websites tonight, I stumbled upon this code. My goal is to create a photo upload page on Google Drive and set up a dropbox for it. I'm facing an issue where the information inputted into my placeholder box (city and ye ...

javascripthtmlgoogle-apps-script

Refreshing the Angular resource under observation

My brain feels a bit fried today, so pardon what might seem like an obvious question. I have a useful resource at my disposal: Book = $resource("/books/:id", {id: "@id"}); book = Book.get(1); When I want to refresh the object to receive any updates from ...

javascriptangularjsangular-resource

Tips for managing an interval for play, pause, and stop functions in JavaScript or Node.js

In my main file, I have an API to control the playback of a video. main.js const { mainModule } = require('process'); const { startVideo, pauseVideo, stopVideo } = require('./modules/video.js'); function init(payload) { if(payl ...

javascriptnode.js

using only css, create a centralized navigation bar without a fixed width

I managed to create a nav bar in the center (check out the link below), but for some reason there is a slight 2-3 pixel gap between each navigation element. Even though I have set both Margin and Padding to 0, the issue persists and I am unable to solve it ...

htmlcss

Having trouble animating a collapse element in Bootstrap 5 that was dynamically created using JavaScript

My objective is to develop a collapsible element that notifies the user about the success or error of sending form data to the server. This will provide clear feedback to the user after form submission. function sendForm(event, form) { const notif ...

javascriptbootstrap-5

Struggling to locate tab link elements with Selenium using different approaches

I am encountering difficulties with Selenium in locating a specific set of tab link elements by their IDs or link text. During my usage of Selenium, I am attempting to click through each of the tabs ("DESCRIPTION AND PRICE", "FINISH", and "NOTES") and extr ...

pythonhtmlseleniumbeautifulsoup

What is the method for eliminating the box shadow on a table?

Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...

htmlcssangularjsngtable

Executing scripts within various node project directories using npm

Creating Concurrent NPM Scripts In my main project, I have several node projects nested as subdirectories. Each of these projects has its own node_modules directories and package.json files. My goal is to define an npm script in the main project's pa ...

javascriptnode.jsnpm

Discovering the bottom side of a cube using Euler Angles (or Quaternions) in three.js

Hey there! I have a little puzzle that I could use your help with: Imagine this - I've got a cube that can be rotated around three different axes. I've gathered some data on the cube's rotation, specifically an array of three angles rangi ...

javascript3dthree.jsgeometryeuler-angles

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

javascriptvue.jsvuex

Navigating through props outside a class component in React

I'm struggling to grasp how I can access props that are defined outside of a React class component. In the code snippet below, all props are clearly outlined except for this.props.checkboxArray, which is currently throwing an error "cannot read prope ...

javascriptreactjsreact-props

Map through the index and render the component while closing the tag

I have a piece of code that I'm working on. How can I dynamically add a tag based on the index? My goal is to create a grid with 3 columns. <div> {items.map((row, i) => ( {i % 3 === 0 && <div className={'grid-cont ...

htmlreactjs

Sending input values through an identifier within a pop-up dialog box

Struggling with my jQuery and Ajax skills, especially when it comes to editing data. The add method works fine, but the edit functionality is giving me trouble. I have a route for editing like /edit/{id}, and whenever I click the button in the modal, it ...

javascriptjqueryajaxbootstrap-modal

Create a unique V-MODEL for each index that I generate

How can I customize the V-MODEL for each object generated? I am developing a cupcake website where users can create multiple forms with just one submission. However, when generating two fields, the inputs of the second field are linked to the inputs of t ...

javascriptvue.js

Error: The function $.simpleTicker is not defined

Every time I try to call a jQuery function, an error shows up: Uncaught TypeError: $.simpleTicker is not a function I attempted changing $ to jQuery but it didn't resolve the issue. This represents my jQuery code: (function ($) { 'use ...

javascriptjqueryhtml

Error: The server selection process has encountered an unexpected issue

Embarking on my journey with MongoDB and the MERN stack, I turned to these tutorials for guidance: https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1 https://www.youtube.com/watch?v=7CqJlxBYj-M ...

javascriptnode.jsmongodbexpressmongoose

Parsing form bodies in Express.js allows for easy extraction of data

Below is an example of a form: <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> < ...

javascriptjsonnode.jsexpress

Currently, my goal is to place a div underneath two other divs. Here is the code snippet that I am working

I am attempting to position the div with id 4 so that it appears after the divs with ids 2 and 3, which are placed next to each other. However, when I try to do this, I notice that the div with id 4 seems to start from the top itself. Even though the con ...

htmlcss

Show information upon opening

I am currently working on a project that involves 4 different divs, and I need the content of each div to be displayed based on dropdown selection. I found a code snippet that was close to what I needed, but after trying to adjust it, I haven't been a ...

javascripthtml