The Bootstrap menu seamlessly extends beyond the edge of the screen

Whenever I try to zoom in on my page, the navigation bar doesn't collapse as expected. Instead, it overflows off the page. This issue persists when viewing the website on mobile devices in landscape mode.

Although I am using the jQuery mmenu plugin, it does not seem to be the source of the problem.

I have provided a screenshot depicting the problem, but you can also visit my live page for reference.

https://i.sstatic.net/S8LnK.jpg

In an attempt to troubleshoot, I removed the mmenu plugin, only to discover that it was not the cause of the issue. Similarly, removing the nav-justified class did not resolve the problem either.

<div class="site_navigation">
    <div class="navbar navbar-expand-md">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
                <i class="fas fa-bars navbar_ikon"></i>
            </span>
        </button>
        <div class="collapse navbar-collapse" id="menu">
            <ul class="navbar-nav nav-justified w-100 container mr-auto">

                    <li class="nav-item dropdown">
                    <a href="https://kemenyem.hu/kategoria/1/barabas-terko" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Barabás térkő</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                    <a class="dropdown-item" href="https://kemenyem.hu/kategoria/6/barabas-terko/barabas-badacsony-terko">Barabás Badacsony térkő</a> 
                                            <a class="dropdown-item" href="https://kemenyem.hu/kategoria/38/barabas-terko/barabas-elegante-granitko">Barabás Elegante gránitkő</a> 
                                            <a class="dropdown-item" href="https://kemenyem.hu/kategoria/8/barabas-terko/barabas-teglako">Barabás Téglakő</a> 
                                            </div>
                    </li>


                    <li class="nav-item"><a href="https://kemenyem.hu/kategoria/36/kerti-szegely" class="nav-link">Kerti szegély</a></li>

                    ...

                                </ul>
        </div>
    </div>
</div>

There are no error messages being displayed at this time.

htmlcssbootstrap-4mmenu

Answer №1

The issue at hand is that the combined width of the li elements is extending beyond the boundaries of its container when a certain breakpoint is reached. My suggestion would be to include flex-wrap: wrap in the ul element, which serves as the navigation container. This way, any elements exceeding the width will automatically shift to the next row:

@media (min-width: 768px) {
 .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
 }
}

Answer №2

To make the navigation bar responsive, include the CSS property flex-wrap: wrap in the styling for the `navbar-nav` class.

.navbar-expand-lg .navbar-nav {
    flex-wrap: wrap;
}

Answer №3

@media (min-width: 768px) {
 .navbar-expand-md .navbar-nav {
    flex-wrap: wrap;
 }
}

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

CSS Background Color Not Displaying Correctly

My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...

csshtml

Using `ngRepeat` on a different array of values for repetition

Working with AngularJS. Here is an example of a JSON object: "skills": { "Charisma": {}, "Dexterity": { "Sk3": [ [ true, true, true, true, false ], 44 ] }, ... And the corresponding HTML: <div class="pan ...

javascripthtmlangularjs

JavaScript and HTML code for clipboard functionality without the need for Flash

My challenge lies in creating a grid with numerous columns and data. The user has expressed the desire for a copy to clipboard button that will allow them to easily copy the data. Can anyone suggest ways to implement Copy to Clipboard functionality withou ...

javascriptjqueryhtmlclipboard

a search-enabled dropdown menu within an Angular input field

I can't seem to get the input box to display in my code below. Can you help me figure out why? component.html <form [formGroup]="formGroup" (validSubmit)="onSubmit()"> <div class="form-group mb-3"> ...

htmlangulartypescriptinputdropdown

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

cssreactjsresponsive-design

How can I style my text using CSS with a linear gradient, shadow, and outline effect

Can text be styled with a linear gradient, shadow, and outline all at once? I'm running into an issue where setting "-webkit-text-fill-color: transparent" for the gradient causes the shadow to appear on top of the text. Is there a way to have the te ...

htmlcsslinear-gradients

I am interested in retrieving data from MySQL by utilizing the FullCalendar plugin

Is there a specific location in my PHP code where I should place a for loop in order to loop through dates in the database? Take a look at this snippet: <script> $(document).ready(function() { $('#calendar').fullCalendar({ d ...

phpjqueryhtmlmysqlajax

Ensure that the Popover vanishes upon scrolling the page - Material UI (MUI) v5 compatibility with React

When implementing the MUI v5 standard pattern for displaying a popover upon hovering over another element, everything works smoothly except for one scenario: If you hover over the element And without moving the mouse, use the scroll wheel to scroll throug ...

javascripthtmlreactjsmaterial-ui

Switch the appearance between two elements

In my HTML table, I have different levels of content - from main "contents" to nested "sub-contents" and even deeper "sub-sub-content". My goal is to hide all sub-content within the content cell that I click on. <table> <tr class=' ...

javascriptjqueryhtml

Interacting with Cassandra using PHP

I am attempting to execute a SELECT query from the Cassandra Database using a PHP script. The connection is successfully established through PHP. Here is the query: $session = $cluster->connect($keyspace); $result = $session->execute("SELEC ...

phphtmlcassandraquerying

Ways to retrieve the path of a button found within table cells

https://i.stack.imgur.com/pUYHZ.jpgI'm currently working on a table where I've created a button that's being used in various rows and tables based on certain conditions. There's a specific scenario where I need to display the button for ...

javascripthtml

Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...

javascriptjqueryhtmlcss

What is the best way to include a pound sign in a cfoutput tag?

My challenge is that I need to display the following HTML tags after receiving data from an AJAX query. The problem arises because in cfml, any string starting with a "#" is considered as an identifier, resulting in an error. <cfoutput> ...

htmlajaxstringcoldfusion

Tips for reusing a form within a one-page website

I am looking for a way to handle a form's submit action using JavaScript. My goal is to hide the form when it is submitted and then be able to reuse it later. However, the code I currently have seems to have a hidden state that prevents the submit act ...

javascripthtmlforms

How can I set a minimum height for a table on my website?

Is there a way to make a table that is at least 50px in size, but can still enlarge if there is a lot of text inside? I'm not sure if this even makes sense, but any help would be appreciated. Thank you! ...

css

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

javascripthtmlcss

How can we effectively transform an HTML opening and closing tag into a function?

Dealing with a complex HTML tag can be challenging, especially when it appears in various parts of the code. For instance: <div class="blabla" data-test="blablabla" ... data-another-attribute="blabla" > <some complex html code ... > </ ...

phphtml

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss

How to create a dynamic height grid using Bootstrap?

Seeking assistance with implementing the layout shown in the image below using bootstrap 4. I am facing an issue with adjusting the height of div 1 and 2 dynamically based on the content in div 3. Can anyone provide some guidance? https://i.sstatic.net/mk ...

htmlcssflexboxbootstrap-4

Storing data from one file into a different directory in PHP

As a php beginner, I have discovered that the most effective tool for working with MySQL databases and files is php. Currently, I am trying to retrieve a file with the name 'file_name'. <input type=file name="file_name"> and then save th ...

phphtmlfile-upload