The menu bar fails to maintain its responsiveness once the breakpoint is reached

The issue I am facing is that the menu bar does not resize properly when the browser window size is less than 900px. This results in the bar being too wide, some content going off the screen, and a horizontal scrollbar appearing.

I have been trying to troubleshoot this menu bar for two days now without success. I have exhausted all possible solutions that came to my mind.

I suspect that the error lies within the 

@media screen and (min-width:900px)

Here is a link to a pen with all the code as it was too much to paste here

jquerycssdrop-down-menuresponsive-designnavigation

Answer №1

Utilize flexbox-wrap to stack each item below the rest, allowing them to move to a new line if there is limited space available

.site-nav>ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap:wrap;
}

View code on CodePen

To prevent overflow on small devices, consider adding margin to the top of the menu as shown below:

@media (max-width :800px){
  .site-nav {
    z-index: 999999999999999999;
    margin-top: 25px;
  }

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

How to use jQuery to dynamically add a variable to a request in Laravel 5.2

Is it feasible to append a variable to the Laravel cookie in the client using jQuery? Understandably, the Cookie is linked to the request during GET? Can you include a variable in the $request container in Laravel 5.2 using jQuery before initiating a GET ...

javascriptphpjquerylaravel-5

Delightful Popup for Successful Woocommerce Additions

I have created a plugin that transforms Wordpress Woocommerce variations into a table layout. I made significant changes to the code and now I'm attempting to integrate Sweet Alerts 2 in place of the current alerts displayed when a user adds a product ...

javascriptjqueryajaxwordpresssweetalert

No content found in image file

I am facing an issue with my script for uploading images with text. The problem is that when the data is posted and the image is uploaded, the file is coming up empty. I'm not sure why this is happening, can anyone assist me in resolving this issue? ...

phpjqueryajaxcodeigniter

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

If the initial tab is not visible, activate the first tab that is currently visible

I need some assistance with jQuery UI Tabs. My menu includes 6 tabs, with the first tab always being "active." However, in some scenarios, one or more tabs may be hidden using "display: none;". Is there a method to identify the first visible tab and set it ...

jquerycssjquery-uitabs

How can I iterate through items with jQuery at regular intervals?

I have a collection of IDs retrieved using Laravel's eloquent, like so: [0, 1, 4, 6, 8, 9] These correspond to records in a database table, and I'm accessing them through a certain route: /get_single_item/{id} My goal is to cycle through this ...

javascriptjqueryjson

Utilizing jQuery to Extract HTML Data Attributes

Is there a way to access and extract the values stored in the data attributes with jQuery? <div class="sm-tot" data-ts-speed="500" data-ts-interval="4000" data-ts-newVal="5000" > ...

jqueryhtml

Should I utilize Sockets or Ajax for my project?

My Login Script Journey I have a goal in mind - to create a login script using Nodejs. I am currently exploring the options of utilizing sockets or ajax posts for this task. My Progress So Far I have Nodejs installed and have referenced this code in my ...

javascriptjquerynode.jssocket.io

Using an Ajax call with Spring MVC may result in receiving plain text instead of JSON

This is the AJAX call that I am using: $.ajax({ url: 'configuration/activePlatform/', type: 'GET', dataType: 'json', contentType: "application/json", success: function(data){ ...

javajqueryjsonajaxspring

What is the best way to align the content of an HTML page in the center using

I'm currently working on a basic webpage and I'm trying to center it using only Bootstrap code (if possible). This is what I have tried so far, but the col-xl-offset-4 doesn't seem to be working. <script src="https://ajax.googleapis.co ...

htmlcsstwitter-bootstrap

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

Assign the class name of the clicked div to another specific div

I am working on a function component where I want to append a class name to a specific div when a user clicks on one of 4 different divs. The divs are named note_b, note_g, note_p, and note_y. Below is the code snippet that I have so far: import React fro ...

javascripthtmlcssreactjs

Inverted CSS Shadow Box

I thought I had a good grasp on how CSS shadow-box works, but it seems I was mistaken. Could someone provide me with a visual explanation of why the <hr/> looks the way it does here? Take a look at style 13: https://codepen.io/ibrahimjabbari/pen/ozi ...

css

Translucent overlay enhancing image contrast

Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...

htmlcss

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

javascriptandroidjqueryhtmlcss

Scrolling through the page, press the "Read Less"

I've implemented a Read More/Read Less button feature for product descriptions on my website. One issue I'm facing is that when I click the Read Less button at the bottom of the extended description, the text shortens as expected but the page do ...

javascripthtmlcssbuttonscroll

The limitation of jquery fileupload is that it does not support the selection of files with varying file

Is it possible to prevent files with certain extensions from being uploaded to my server? Specifically, using jQuery fileupload, how can I restrict the selection of multiple file types simultaneously, such as pdf and tif? ...

javascriptjqueryfile-upload

Is there a way for me to prevent the need to open a new window to view the results?

Can someone help me with my code? I want to display results without opening a new window or replacing the current content in the same window. I'm thinking of using AJAX to show results in a dialog window using JQueryUI but I'm not sure how to do ...

javascriptjqueryajaxjquery-ui

Is there a way to transfer the value of a data attribute to an element within a Bootstrap modal?

When you click on the button within any block, a modal window will open displaying data from that block. I attempted to use this Stack Overflow post as a guide, but unfortunately, it did not work for me. $(document).on("click", ".openBlogDialog", func ...

jquerybootstrap-modalbootstrap-5

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

jqueryhtmlcss