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

What is the best way to incorporate material icons onto a website?

When I attempted to display an icon on my webpage by adding <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to the index.html file, only the icon name appeared as text instead of the actual ...

htmlcssgoogle-material-icons

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

javascripthtmlcss

Interactive JQuery plugin for scrolling through thumbnails with customizable buttons

I am attempting to create a jQuery thumbnail scroller with buttons that respond to mousedown and mouseup events. I have successfully implemented the scrolling functionality, but I am facing issues when trying to refactor it into a reusable function. Below ...

javascriptjqueryhtmlcss

The inputs are not responding to the margin-left: auto and margin-right: auto properties as expected

I'm having trouble aligning an input in a form to the center. Even though I have included display: block in the CSS, using margin-left:auto and margin-right: auto is not yielding the desired result. To illustrate the issue more clearly, I've cre ...

csshtml

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

htmlcsscss-selectors

Tips on identifying HTML email input validation using JavaScript?

Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...

javascripthtml

Embed schema information into HTML tags using JavaScript

Is there a way to insert text, specifically schema data, into an HTML div tag using JavaScript? While I know how to modify existing values within a tag like class, href, and title, I am struggling to find a method to add something entirely new. Essentiall ...

javascripthtmltags

Is it possible to run quirks mode in one frame while running standards mode in another?

Back in the IE6 days, I developed an old application that relies on frames instead of iframes and runs in quirks mode. Now, I'm wondering if it's possible to have one frame remain in quirks mode while another operates in standards mode when using ...

htmlcssquirks-mode

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

javascriptjqueryhtmlcssdom

Breaking up and Substituting text within Angular 8's HTML structure

When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...

htmlangulartypescriptangular8

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

jqueryhtmlcss

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge. After some trial and error, I realized t ...

htmlreactjstypescriptnext.jsserver-side-rendering

Issues with PHP and mySQL search functionality

<?php $username = "root"; $password = ""; $hostname = "localhost"; $db_handle = mysql_connect($hostname, $username, $password) or die ("Could not connect to the database"); $selected= mysql_select_db("login", $db_handle); ...

phphtmlmysqlsearchsearch-engine

effortlessly eliminate the Google MyMap watermark from an iframe using ReactJS

I am new to ReactJS and I would like help on how to hide the watermark on a Google My Map. Can someone please assist me with this? <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1OMSkPKZi-U-CnmBr71zByNxp8HYi-vOc&ehbc=2E312F" fram ...

javascripthtmlcssreactjs

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

htmlcssplayframework

Utilize Bootstrap to position the button right next to the input field

I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...

htmlcsstwitter-bootstrap

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

I have two distinct navigational sections on my website. The left column has its own navigation menu, while the right column (main content area) contains a separate set of links: My goal is to click on a link in the left-hand sidebar (such as "Resume", "E ...

javascriptjqueryhtml

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

javascriptcssreactjsscrollonscroll

Pattern for identifying Google Earth links with regular expressions

I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...

javascripthtmlregex