How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav".

When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain its structure without changing shape as the screen size changes.

Check out this jsfiddle: http://jsfiddle.net/Cyc4n/

If you resize the window in the jsfiddle link, you'll see the menu moving around - how can I keep it still and consistent?

Any guidance would be greatly appreciated

htmlcssnavigationpositionhtml-lists

Answer №1

To ensure your navigation bar is a minimum width of 900px, you can use the following CSS rule: .navigation{min-width:900px;}. This will prevent any unwanted floating behavior. Keep in mind that the actual width may vary depending on factors such as font size, borders, padding, margins, and browser-specific settings if not reset. Additionally, if you are using relative units like em, consider using em for the min-width property as well.

Answer №2

To style the elements .subnav, you can use display: table-cell; and for their parent .navigation, you can use display: table; (or even better, use table-row for the parent of .subnav and table for the parent of .navigation). You can also check out this example on jsfiddle: http://jsfiddle.net/Cyc4n/1/

In my demo, I included table-layout: fixed and added extra padding to the right of the logo as examples of how you can customize your layout. These can be removed if you prefer the browser to handle item widths automatically.

An alternative approach is using CSS3 Flexible Box Layout, but keep in mind that its support is not as widespread as CSS2 display: table;. However, if you are targeting mobile devices with Media Queries, Flexbox should work fine as most browsers supporting Media Queries also support Flexbox. It's all about responsive design - focusing on desktop first rather than mobile first.
Moreover, support for display: table*; goes back to IE8, while for IE7- fallback to inline-block is recommended.

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

Interactive pop-up window featuring conversational chat boxes

Trying to create a comment box within a Modal dialog box that is half of the width. The comments in this box should be read-only and created using div tags. Attempted reducing the width and using col-xs-6, but ending up with columns spanning the entire w ...

javascripthtmlcssfrontend

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

javascripthtmlnode.jsexpress

Are programmatic clicks distinguishable from manual clicks in JQuery?

Currently, I am in the process of creating selectable and draggable elements for a table. You can test the functionality by following this JsFiddle link (please try vertically selecting). Initially, the selection works well but upon trying to select for th ...

javascriptjqueryhtmlcss

The functionality for determining whether the value isset as 'Yes' or 'No' is not functioning properly in my PHP form

I'm currently working on creating a combined 'Order Calculator / Order Form' using one php form. The calculator part of the form is functioning perfectly and accurately calculates the total for all 5 order options both on the live page and i ...

phphtmlformsisset

Place an image in a div so that it is centered both vertically and horizontally

I have been trying to center an image both horizontally and vertically, but it seems like my code is not working properly. Here is what I have so far: #parent { position: relative; float: left; width: 700px; height: 400px; overflow: hi ...

csshtmlimage

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

javascriptjqueryhtmlasp.netrazor

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

cssbootstrap-4

transforming unicode into regular characters prior to being presented on a webpage

I am currently utilizing the openinviter class to import contacts from emails. Sadly, it is showing Unicodes of non-English characters, like Polish, such as u0117 (and similar code types), instead of regular characters. Is there a way to convert these Unic ...

phphtmlunicode

Is there a way for me to create a sidebar that is scrollable, like the one on www.youtube

Hey there! I'm looking to incorporate a feature on my website that resembles the layout of https://www.youtube.com/. More precisely, I want to have a sidebar on the left side displaying playlists, subscriptions, and other options. However, I don' ...

htmlbootstrap-4

Is it possible for a div to extend beyond the previous div's boundaries using CSS?

When viewing a website like GameFAQs, you may notice that there are two divs positioned next to each other - the main content and an aside (such as a poll). As you resize the window, the aside sometimes moves down below the main content without leaving any ...

htmlcss

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...

csscss-selectors

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

Guide on sending a key to a text input field using JavaScript

How can I simulate sending a combination of keys (such as Ctrl+C or Alt+Shift) when the cursor enters an input text field using Javascript? I am not utilizing jQuery, but rather MS-Ajax. Is it achievable with MS-Ajax DOM? EDIT 1) Following @Ghostoy&apos ...

javascripthtmlajax

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

javascripthtmlajax

I desire to place a picture atop a carousel within a bootstrap framework

I'd like half of my display picture to overlap the carousel image at the top and be centered. The carousel should serve as a cover page similar to Facebook. .dp-container{ width: 200px; height: 200px; border: 2px solid black ...

htmlcssbootstrap-4

Tips for formatting text in a way that allows it to flow down a page smoothly as the

Working within a CSS Grid setup, I have an image on the left and a block of text on the right. As I reduce the page width, both the image and text resize accordingly to fit the page width. However, once the width goes below 475px, the layout breaks and the ...

htmlcssresponsive-designcss-gridresponsive-images

Aligning Elements in the CSS Bootstrap Grid

Struggling to achieve perfect center alignment of an HTML element using the Bootstrap grid framework. Here's the current code: <div id="rentals" class="container pb-4"> <div class="row pt-5 mt-5 mb-4"> ...

htmlcssbootstrap-4grid

Having trouble with a basic API Get request?

I'm trying my hand at making a simple get request to fetch a random quote from an API. When I hardcode the change of the quote on button click, everything works smoothly. $(document).ready(function() { $("#quotebtn").on('click', functio ...

javascripthtmlajax

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

jqueryhtmlcss