Bootstrap 3 Navigation toggler glitch - collapses without displaying the button

Something seems off here, and I suspect it's a rather silly mistake on my part.

In Umbraco 6.0.5 with Bootstrap 3, I'm having trouble getting the toggle function to work correctly. When the screen width is below 770px, the navigation collapses as expected, but there seems to be an issue with the toggle button. It appears in the code and Firebug, but is not visible in Chrome and Firefox (I haven't tested IE).

You can check out a working fiddle for reference. Here are the scripts I'm using: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, , and .

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href"#">reech</a>  
    </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
      <ul class="nav navbar-nav">
        <li><a href="/" class="selected">Home</a></li>
        <li class=" dropdown">
          <a href="/what-is-reech.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">What is reech? <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/what-is-reech/about-this-site.aspx" rel="">About this site</a></li>
          </ul>
        </li>
        <li class=" dropdown">
        </li>
        <li><a href="/key-reech-projects.aspx" class="" rel="">Key reech projects</a></li> 
        <li class=" dropdown">
        </li>
        <li><a href="/technologies.aspx" class="" rel="">Technologies</a></li> 
        <li class=" dropdown">
        </li>
        <li><a href="/complementary-activities.aspx" class="" rel="">Complementary Activities</a></li> 
        <li class=" dropdown">
          <a href="/news.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">News <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/news/merseyside-collective-switching-scheme-launched.aspx" rel="">Merseyside collective switching scheme launched</a></li>
            <li><a href="/news/reech-scoops-top-award.aspx" rel="">reech scoops top award</a></li>
            <li><a href="/news/reech-award-nomination.aspx" rel="">reech award nomination</a></li>
            <li><a href="/news/green-deal-and-energy-company-obligation-(eco)-september-2013-statistics.aspx" rel="">Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</a></li>
            <li><a href="/news/energy-switching-scheme.aspx" rel="">Energy Switching Scheme</a></li>
            <li><a href="/news/project-reeches-new-milestone.aspx" rel="">Project &#39;reeches&#39; new milestone</a></li>
            <li><a href="/news/firms-sign-up-for-new-opportunities.aspx" rel="">Firms sign up for new opportunities</a></li>
            <li><a href="/news/14-new-jobs-created-for-merseyside-residents.aspx" rel="">14 new jobs created for Merseyside residents</a></li>
            <li><a href="/news/reeching-out-to-low-carbon-and-green-energy-sector.aspx" rel="">&#39;reeching&#39; out to Low Carbon and Green Energy Sector</a></li>
          </ul>
        </li>
        <li class=" dropdown">
        </li>
        <li><a href="/reech-into-business.aspx" class="" rel="">reech into business</a></li> 
        <li class=" dropdown">
          <a href="/reech-partners.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">reech partners <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/reech-partners/reech-steering-group.aspx" rel="">reech Steering Group</a></li>
          </ul>
        </li>

      </ul>
    </div><!--close navbar-collapse-->
  </div><!--close container-->
</nav><!--Close nav-->

An update - after changing the data-target parameter to #main-nav and updating the ID to main-nav, nothing changed. Then I experimented by inserting dashes inside the span elements of the button, which surprisingly made the toggle function work. However, now the icon bars seem to be missing.

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar">-</span>
    <span class="icon-bar">-</span>
    <span class="icon-bar">-</span>
  </button>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Modify the code from <nav class="navbar"> to 

<nav class="navbar navbar-default">

Answer №2

Issue with Bootstrap Toggle Button not appearing on mobile devices

Solution: Modify the following in: bootstrap.min.css

Adjustments for the outer border of the Toggle Button

.navbar-toggle
{
    position:relative;
    float:right;
    padding:9px 10px;
    margin-top:8px;
    margin-right:15px;
    margin-bottom:8px;
    background-color:transparent;
    background-image:none;
    border-radius:4px
}

Add

border:1px solid #444;

(customize color code to match your design)

.navbar-toggle
{
    position:relative;
    float:right;
    padding:9px 10px;
    margin-top:8px;
    margin-right:15px;
    margin-bottom:8px;
    background-color:transparent;
    background-image:none;
    border:1px solid #444;          /* additional line */
    border-radius:4px
}

Correcting the horizontal lines of the Toggle Button

.icon-bar
{
    display:block;
    width:22px;
    height:2px;
    border-radius:1px;
}

Add

border:1px solid #444;

(customize color code to match your design)

.icon-bar
{
    display:block;
    width:22px;
    height:2px;
    border-radius:1px;
    border:1px solid #444;
}

Answer №3

Starting with your initial sentence

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

Make sure to use data-target="#nav-collapse" instead, as you specified 

<div class="collapse navbar-collapse" id="nav-collapse">
with the id being nav-collapse

Answer №4

It seems like the issue you're facing is with the button data-target attribute referencing a class instead of an ID. Using an ID here would be more appropriate to avoid complications in other parts of the code involving that class.

I noticed that there are several 

<li class="dropdown"></li>
elements that appear to be empty. It's unclear if this was intentional, but I recommend following the structure provided below for clarity.

Hopefully, these adjustments help resolve your concerns. Best of luck!

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid"> 
    <!-- Brand and toggle grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">Reech</a> </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li>
          </ul>
        </li><!-- dropdown -->
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/technologies.apsx">Technologies</a></li>
            <li><a href="/complementary-activities.apsx">Complementary Activities</a></li>
          </ul>
        </li><!-- dropdown -->
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/technologies.apsx">Technologies</a></li>
          </ul>
        </li><!-- dropdown -->
      </ul><!-- nav navbar-nav -->
    </div><!-- collapse navbar-collapse -->
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</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

Vue.js does not return JSON data from Axios, only a string

I am facing an issue with axios as it is returning a string instead of JSON format. I need some help to understand why this is happening. <template> <div class="app"> <Header/> <h1>{{services}}& ...

javascriptvue.jsaxios

Is there a way to ensure that my AngularJS factory fetches HTTP data only once?

I have implemented a factory in my project to share data among multiple controllers. Here is the code for my factory: var szGetData = "some url that works"; myApp.factory('Data', function ($http) { var eventData = {}; eve ...

javascriptangularjs

What are the steps to customizing a package on atmospherejs.com within meteor.js?

When working with atmosphere in meteor.js, installing a package is typically as simple as using a single command. However, if there is a need to make changes to a specific package for customization purposes, the process becomes a bit more complex. For ex ...

javascriptnode.jsmeteoratmosphere

Center a list-group with text and dropdown using Bootstrap 4 vertical alignment

I am relatively new to using Bootstrap 4 and I am encountering challenges in vertically aligning certain elements within a list-group. Specifically, I have text on the left side and a dropdown on the right. <div class="dashboard-blocks"> <ul cl ...

htmlcssbootstrap-4

Create a Python class that triggers when a button in an HTML document

Just diving into the world of Python and feeling a bit overwhelmed. I've tried searching for solutions to my problem, but no luck so far. Hoping for some assistance from you all :) I have a template with a button: <button class="btn" value="{{inv ...

pythonhtmldjangogoogle-app-enginewebapp2

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...

javascriptjqueryhtmlajaxangularjs

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

obtain hyperlinks on a website

Is it possible to retrieve links from a web page without actually loading it? Essentially, I would like to allow a user to input a URL and then extract all the available links within that webpage. Do you know of any method for accomplishing this task? ...

javajavascripturlhyperlink

Use JavaScript executor in Selenium WebDriver to interact with list items by clicking on them

I am facing a challenge where I need to gather multiple links, click on each link, and extract specific information from the website to export into Excel. My approach involves collecting all the links in one list and attempting to click on each one based ...

javascriptjavaselenium-webdriver

The onsubmit function encounters an issue with invocation when implemented with Node.js

When I submit the form, I want to perform some validations. However, it seems like the validation function is not working as expected. The alert part does not appear when triggered. Here is the code snippet: function validation(){ alert("somethi ...

javascripthtmlnode.jsexpressejs

Stop all requests in axios if any of them fail

I've got a series of pending requests lined up const requests = []; requests.push(axios.post('/request1', {moo:1}); requests.push(axios.post('/request2', {moo:2}); requests.push(axios.post('/request3', {moo:3}); Promise ...

javascriptajaxpromiseaxioscancellation

Unable to change color of SVG icon when active

I seem to be having trouble getting my SVG element to fill with a specific color in the active state. Despite searching online for examples, I couldn't find much relevant information on this topic. Most of the resources available online focus on hover ...

htmlcss

extract data from text using regular expressions to retrieve two values

Can someone assist with creating a regex expression to parse this string in JavaScript: $D('make').onChange('s',123456789,'a',10) I am trying to extract the values 123456789 and a from this string. Any help would be appreci ...

javascriptregex

Polymer 1.0: Failure to update when binding CSS classes

Looking for some help with this code snippet: <dom-module id="foo-bar"> <template> <span class$="{{getState()}}">Foo Bar</span> </template> <script> (function() { class FooBar { ...

javascriptdata-bindingpolymer

Can you explain what a scaled image is and how I can use it on a webpage?

While running a test page on Google PageSpeed, I came across some warnings such as serving scaled images. http://man-vimal.net78.net/introduction/?intro/action=main The results showed: The following images are resized in HTML or CSS. Serving scaled image ...

htmlcss

Method for retrieving list items in ajax.request jquery response

Currently, I am working on an Asp.net MVC application that includes a function with a jQuery ajax call. The response is stored in the data/result object, as expected. This response consists of multiple items within an array. I am trying to figure out how ...

jqueryajaxasp.net-mvcasp.net-ajax

What is preventing the question div and buttons from expanding according to their content?

After experimenting with setting the height of the question div to auto, I found that it would stretch to fit its content. However, I am looking for a solution without overflow: auto or scroll. Is there a limit to how responsive it can be once a certain ...

htmlcss

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

I am currently working on creating a single page application (SPA) using Mithril.js. While I have come across some helpful tutorials like the one here and on the official Mithril homepage, I am struggling to combine the concepts from both sources effective ...

javascriptjsonurl-routingsingle-page-applicationmithril.js

List Elements Not Displaying Correctly due to CSS Styling Issues

After spending several hours trying to solve this problem, I've hit a roadblock. The challenge lies in dynamically adding items to a list using JavaScript and the Dojo library. I've experimented with both vanilla JS and Dojo code, ruling that pa ...

javascripthtmlcssdojo

In my React JS class component, I am looking to have the image display switch each time the button is clicked

How can I change the image when clicking a button in a class component? I am familiar with function components, but unsure how to achieve this. class CoffeeImages extends React.Component{ constructor(props){ super(props) ...

javascriptreactjs