Mobile Mode Blocking Bootstrap Navigation

Why is my bootstrap navigation stuck in mobile mode even on desktop devices? What mistake have I made?

<div id="main-menu-container" class="collapse navbar-collapse">
    <ul id="menu-main" class="navbar-nav mr-auto">
        <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-10"><a class="nav-link" title="Home" href="//offline.inspiredchildcare.com.au:3000/">Home</a></li>
        <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13"><a class="nav-link" title="About" href="//offline.inspiredchildcare.com.au:3000/about/">About</a></li>
        <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16"><a class="nav-link" title="Our Centres" href="#" data-toggle="dropdown" aria-haspopup="true">Our Centres <span class="fa fa-caret-down"></span></a>
            <ul role="menu" class=" dropdown-menu bg-primary">
                <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-22"><a class="nav-link" title="West Pennant Hills" href="//offline.inspiredchildcare.com.au:3000/our-centres/west-pennant-hills/">West Pennant Hills</a></li>
                <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-25"><a class="nav-link" title="Glenwood" href="//offline.inspiredchildcare.com.au:3000/our-centres/glenwood/">Glenwood</a></li>
                <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-31"><a class="nav-link" title="Blacktown" href="//offline.inspiredchildcare.com.au:3000/our-centres/blacktown/">Blacktown</a></li>
            </ul>
        </li>
        <li class="nav-item" itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-19"><a class="nav-link" title="Contact" href="//offline.inspiredchildcare.com.au:3000/contact/">Contact</a></li>
    </ul>
</div>

Preview: https://codepen.io/anon/pen/eVbWOx

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Modify the 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" role="navigation">
to read as 
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation>
and integrate jQuery into your code snippet

Check out the codepen demonstration

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 process for implementing a unique Angular theme across all components?

I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...

cssangularscss-mixinscustom-theme

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

jqueryhtmlcss

Unable to modify div style using a JS function

I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific ...

javascripthtmlcss

Is it safe to incorporate bootstrap.js into a bootstrap-vue project?

I am currently working on a VueJS application that functions like a calculator. This app will be attached to a DOM element within an established "static" webpage on a CMS platform with Bootstrap 4 themes. The navigation bar and other site features rely on ...

vue.jsvuejs2bootstrap-4bootstrap-vue

Screen wrapping with HTML tags (default) and content (if it exceeds)

After researching how to ensure that a webpage wraps all its content, I discovered that maintaining the width property of the html tag can help the height adapt automatically as per the content. However, my challenge arises from the need for dynamic conte ...

htmlcss

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

After implementing a Button from MUIv5, I noticed that the full animation only triggers when I hold down the button instead of with a simple click. Is there a way to fix this so that the animation fully plays with just a single click? Any help is apprecia ...

cssreactjsmaterial-uicss-transitionsjss

What exactly is the significance of "hash" in terms of Internet Explorer style

After downloading a sample CSS file, I noticed the following entry: #text-align: right; The comment beside the entry mentioned that this expression is specifically for justifying it in IE, while text-align: right; works for Safari and Chrome. My questi ...

css

The mp4 video on the website will only load if the Chrome developer tools are activated

Whenever I try to play the video set as the background of the div, it only starts playing if I refresh the page with Chrome dev tools open. HTML: <div id="videoDiv"> <div id="videoBlock"> <img src="" id="vidSub"> <video preload="prel ...

htmlcssmp4

Issue with -webkit-tap-highlight-color when tapping on mobile, causing text to become invisible

Despite trying various solutions, I am still facing an issue where the text/image in the greybox section appears hidden when tapped. Can anyone please help me with this problem? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

htmlcssmobile

Having trouble with ':after' float setting not working? Let's explore alternative solutions!

Having trouble using the class selector and pseudo element :after with a float:none; setting that doesn't seem to be working. Any alternatives? ...

htmlcssclassselector

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Is there a more stylish approach to styling this HTML table using CSS display: table with Sass? Instead of using traditional table elements, I have created a table layout using display: table CSS styles applied to div elements: <div style="display: ...

javascripthtmlcsssassmustache

How to create fading directional navigation arrows using the Orbit jQuery plugin?

I want the navigation arrows to only appear when the user hovers over the "#featured" div or its display. My current code achieves this, but the transition is quite abrupt: $("#featured, div.slider-nav").hover(function(){ $("div.slider-nav").animate({ ...

jquerycssjquery-pluginsfadeinorbit

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

htmlcssbootstrap-5font-sizecss-specificity

Ways to enable the font size to dynamically adapt to a div's dimensions

Is dealing with the following scenario: I am currently working on a component that will handle text and my requirement is to implement automatic size adjustment based on the text length. For example, if the content has a width of 50px, once the text reac ...

javascripthtmljquerycssvue.js

The relationship between formatting context and atomic inline-level boxes is crucial for understanding

Check out this link for more information on inline boxes An inline box is a unique element that falls under the category of both inline-level and participates in its containing inline formatting context. When a non-replaced element has a 'display&ap ...

htmlcssflexboxw3c

Is it possible for IE7/8 to show position:relative elements in front of position:absolute ones?

The layout I have created utilizes absolute positioning and includes a CSS-based menu in the header section. It functions perfectly in Firefox, however, when viewed in Internet Explorer 7 and 8, the menu dropdowns are hidden by the content area. Unfortunat ...

internet-explorer-8internet-explorer-7cssz-index

What is the method to fetch CSS properties in relative units like percentages and ems using the .css() function with the selector "$("selector")"?

Using jQuery to retrieve HTML element's css properties hasn't been as effective as desired. To test this issue, the following experiment was conducted: var div = document.createElement("DIV"); div.id = "testdiv"; var testZero = $(div).css("w ...

javascriptjquerycss

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

I am struggling with the following html code: <div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"></div> </div> The "co ...

htmlcss

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

Sequence of HTML elements arranged in a stack

Recently, I came across a useful jQuery tutorial called "jQuery for Absolute Beginners: Day 8". In this tutorial, there is an interesting code snippet that caught my attention: $(function() { $('.wrap').hover(function() { $(this).childre ...

javascriptjqueryhtmlcss