The JQuery mmenu breaks free from its constraints within a Bootstrap 4 design

Whenever I zoom in on my page or view it in responsinator.com, particularly in landscape view, the menu fails to collapse into the mobile version.

I have implemented the jquery mmenu plugin alongside bootstrap 4 justified nav.

After attempting to remove the justified class, the issue persists, and having a justified menu is essential. As for the menu, I have not applied any custom CSS, only colors and font size adjustments.

You can check out my page here.

<div class="site_navigation">
    <div class="navbar navbar-expand-sm">
        <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="/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="/kategoria/6/barabas-terko/barabas-badacsony-terko">Barabás Badacsony térkő</a>
                        <a class="dropdown-item" href="/kategoria/7/barabas-terko/barabas-gerecse-terko">Barabás Gerecse térkő</a>
                        <a class="dropdown-item" href="/kategoria/5/barabas-terko/barabas-somlo-trio-terko">Barabás Somló Trió térkő</a>
                        <a class="dropdown-item" href="/kategoria/8/barabas-terko/barabas-teglako">Barabás Téglakő</a>
                    </div>
                </li>

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

                <li class="nav-item dropdown">
                    <a href="/kategoria/10/terko-meret-szerint" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Térkő méret szerint</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/kategoria/15/terko-meret-szerint/10x20-cm-terko">10x20 cm térkő</a>
                        <a class="dropdown-item" href="/kategoria/18/terko-meret-szerint/20x13-3-cm-terko">20x13,3 cm térkő</a>
                        <a class="dropdown-item" href="/kategoria/19/terko-meret-szerint/vegyes-meretu-kombi-terko">Vegyes méretű, kombi térkő</a>
                    </div>
                </li>

                <li class="nav-item dropdown">
                    <a href="/kategoria/9/terko-vastagsag-szerint" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Térkő vastagság szerint</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/kategoria/11/terko-vastagsag-szerint/4-cm-vastag-terko">4 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/12/terko-vastagsag-szerint/5-cm-vastag-terko">5 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/13/terko-vastagsag-szerint/6-cm-vastag-terko">6 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/14/terko-vastagsag-szerint/8-cm-vastag-terko">8 cm vastag térkő</a>
                    </div>
                </li>

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

When viewing the page on a tablet or mobile device, I prefer not to see the entire menu, only the menu toggler-icon.

jqueryhtmlcssbootstrap-4mmenu

Answer №1

If the resolution is lower than 578px, the navigation will switch to a burger menu. However, if you want the entire navigation to disappear on a tablet, you will need to change the class from 

<div class="navbar navbar-expand-sm">
to 
<div class="navbar navbar-expand-md">

Here is a snippet of the current navigation and the desired navigation:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Current Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br />
<br />
<div class="container">
  <h3>Desired Navigation Below</h3>
</div>


<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar You Want</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

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

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

What is the most effective method for creating a gallery of images on a website?

I am looking to create a website that primarily features images. This site is intended to visually showcase our products, allowing visitors to explore each part of our offerings on their own. Can anyone recommend a specific jQuery program I can use to ach ...

jqueryimage

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

html

Having difficulty retrieving data from JSON file using Backbone framework

When I click on the div, I am attempting to retrieve JSON data but am unable to view the output. I am utilizing Backbone Collection to fetch JSON data. I have tried displaying the JSON data in the console as well as within another div. The contents of the ...

javascriptjqueryjsonbackbone.js

Unable to display array values (using jQuery)

Help! I am having trouble rendering all my values. I have names (buttons) and when I click on them, I want to render the array behind it. Using .append() works, but the issue is that when I click again, it doesn't refresh and gets stacked. I am thinki ...

javascriptjquerydjango

Looking to receive a JSON response using jQuery Ajax in Spring MVC? Check out the following Ajax code snippet I've written:

How can I receive a JSON response using jQuery Ajax in Spring Mvc? Below is the ajax code : $.ajax({ type: 'POST', url: "fetch", dataType: 'json', data: {clientidedit:client ...

javajqueryjsonspring

How jQuery Autocomplete handles lowercase conversions in queries

Currently, I am utilizing the jQuery Autocomplete plugin 1.1 for a project. Below is my calling code: $("#txtCombo").autocomplete("http://www.example.com/autocomplete.php", { autoFill: false, width: 550, minChars: 3, ...

phpjquerymysqljquery-uiautocomplete

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

What is the best way to apply padding to the top of a div when it is positioned below another div?

Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...

htmlcsssasscss-selectors

Moving a file from one webpage to another

My current project involves creating a multi-page form consisting of 3 pages. The first page will collect user input, including an uploaded file. The second page will display a summary of the entered data for confirmation. The third page will handle submit ...

phphtmlcakephppost

What purpose is served by the use of '.src' in Next.js?

When working with Next.js, I encountered a situation where I needed to set a background image. After doing some research, I came across a solution that involved adding .src at the end of the image reference like this: import bgImg from '../public/imag ...

cssreactjsnext.js

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text. .text-align-center { text-align:center; } However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered. Is ...

htmlcss

Tips for positioning text alongside ICONS using CSS

Is there a way to align the text in the second row with the text in the first line? Here is the URL for my website: https://stgbusiness.wpengine.com/ And here is the code: <img src="https://stgbusiness.wpengine.com/wp-content/uploads/2021/10/modu ...

javascripthtmlcsswordpressthemes

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

javascriptjqueryhtmlcssslideshow

Adjust the size of both the parent div and child textarea dynamically to ensure they are always equal without setting specific height or width values

To ensure that the height and width of a parent div that contains a child textarea are exactly equal, you can utilize the following CSS code snippet: https://jsfiddle.net/BwVQZ/7/ <div> <textarea></textarea> </div> div{ hei ...

htmlcss

Steps for inserting new rows into a table from text fields1. Begin

As someone who is brand new to jquery/html, I am eager to create a diary specifically for logging my long distance running times in a neat table format. Here's the HTML code I have been working on: <head> <title>Running Diary</titl ...

javascriptjquery

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

WebSocket connection established on port 8888, while the web server is running on port 80 - incompatible to merge the two services

Here is some node.js server-side code that involves watching a file and sending modifications to the browser: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') a ...

javascriptjquerynode.jswebsocketport