The Element fails to go back to its original position due to CSS Float

After changing the screen resolution, it appears that the nav-search-ul element fails to return to its correct position. It seems like the media query is not working properly.

This issue only occurs in Chrome, as everything works fine in Firefox and IE.

You can verify this by clicking here

    <nav>
      <ul>
        <li class="m">aaaaa</li>
        <li class="nav-search-ul">bbbbb</li>
      </ul>
    </nav>

    li {
      color: red;
      display: block;
    }

    ul {
      clear: both;
      background: rgb(27, 34, 36);
      text-align: center;
    }

    @media (min-width: 600px) {
      li {
        display: inline-block;
      }
      .nav-search-ul {
        float: right;
      }
    }

A solution has been found:

http://codepen.io/anon/pen/jPOGZN

Answer №1

To achieve the desired effect, simply include this CSS code:

.nav-search-ul {
  display: inline;  
}

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 retrieve a modified HTML input field in CodeIgniter PHP?

I am using a CodeIgniter PHP website with a form for users to add and edit products. The editing process is functioning correctly, here is the code for editing a product: View: <form action="" method="post" enctype="multipart/form-data"> < ...

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

I've encountered a similar issue on a popular website, www.godaddy.com. When zooming in or accessing the site from a mobile device, the right side of the banner gets cut off. However, when viewed on a full-sized computer screen, there are no issues. M ...

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

I have a roster of users, each with a unique checkbox for selection. When I adjust the dropdown menu, a new group of users is chosen and marked as selected. However, I am struggling to uncheck the previously selected checkboxes based on the last dropdown c ...

Discovering the top method to locate an Error Modal Message using Selenium

I am looking to automate a specific process that involves an Error modal popping up. I am trying to use Selenium to capture this modal which appears in multiple instances. So far, I have attempted to locate it by XPath without success. Using CSS selector o ...

Difficulty in making Materialize.css column match the height of the entire row

Utilizing React.js, Materialize.css, and certain MaterialUI components in collaboration to build a website. Developed a header (React component, basic div with title and logout button) for the site using a Materialize.css "grid". Issue: The react compone ...

Make your CSS and JS files smaller by using a PHP compression script in your WordPress child theme

  I am looking to implement a PHP script that will serve combined, pre-gzipped, and minified JS and CSS files. You can find the source code for this script here: https://code.google.com/p/compress/ I have a WAMP localhost with WordPress install ...

Css beforehand, unique subject matter

Trying to use a jQuery plugin that has CSS code like this: .icon-eye:before { content: '\56'; } On the plugin's site, it displays as an eye icon. However, when I install the plugin on my local PC, I see 'V' instead of the ey ...

Is it possible for an HTML checkbox value to store a boolean rather than a string?

Strings are held by HTML Input values. For instance: This stores the string "yes". <input type="checkbox" name="checkThis" value="yes"> Nevertheless, for checkboxes it is sometimes beneficial if the value was a boolea ...

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

To retrieve the first td element by clicking a button within the corresponding row using JQuery

This may seem like a straightforward inquiry, but despite my best efforts, I have been unable to find a solution. I am looking to create a function that will allow me to click a button located in the 3rd td element and display the text from the first td e ...

dropdown menu items with jQuery toggle feature

Having an issue with a jQuery dropdown menu. Below is the code: $('.item-active, .item').click(function() { $(this).toggleClass('item-active'); if($('h3').hasClass('item-active')) { $(this).siblings ...

Creating a space for showcasing error messages in Angular and CSS

How can I display an error message min 3 char at the bottom of an input field when only 1 character is entered? Referencing this example: https://i.sstatic.net/Eujle.png Currently, the error message appears on the right side of the input field. https:/ ...

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing

As I develop my web application, I have incorporated react-bootstrap for its React components based on Bootstrap. However, wanting to give my project a customized look inspired by Material design, I came across bootstrap-material-design. I am curious if I ...

Issue with "unterminated <a> tag"?

Can someone please explain to me why I am getting an error message stating that "the <a> tag was not closed before the </h1> tag" in the code snippet below? <a href="http://sap/univertical/mysite5/default.htm"><span class="style4"> ...

Enhance the appearance of datatables pagination with a personalized touch

I am working on a page that utilizes server-side datatables and I want to implement a custom pagination style on it: HTML <ul class="pagination pagination-danger"> <li class="page-item"><a class="page-link" href="#" data-original-title ...

What is the best way to include a line break in a text sourced from a React state?

Here is a functional React code snippet: const about={ text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?', text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?&apos ...

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

Check out my project demo here Whenever I double click on a child element, it also triggers the parent element at the same time. I want to prevent this behavior so that only the child element is affected by the double click event. Can anyone provide assis ...

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...