menu fails to expand when clicked in mobile view

Could someone please help me troubleshoot why the menu icon is not expanding in mobile view? I'm not sure what I did wrong. Here is the link for reference:

Snippet of HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
          <i class="fa fa-bars"></i>
       </button>
        <a href="#" class="navbar-brand"><img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png"></a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right hidden-xs">
          <li role="presentation" class="active"><a href="#">About Us</a></li>
          <li role="presentation"><a href="#projects">What We Do</a></li>
          <li role="presentation"><a href="#join">Join the Team</a></li>

          <li class="form">
            <form class="search-container" action="//llamaswill.tumblr.com/search">
                <input id="search-box" type="text" class="search-box" name="q" />
                <label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
                <input type="submit" id="search-submit"/>
            </form>
            </li>
         </ul>

    </div>
  </div><!--end container-fluid-->

Answer №1

The placement of your IMG in the navigation bar is incorrect. To ensure that the mobile menu works properly when clicked, you should relocate the IMG link to the class="navbar-toggle" button.

.navbar .navbar-header .navbar-toggle {
  padding: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <img src="http://placehold.it/40x20/000/000">
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">

      <ul class="nav navbar-nav">
        <li class="active"><a href="#">About Us <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">What We Do</a>
        </li>
        <li><a href="#">Join the Team</a>
        </li>
      </ul>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

Problem with updating an Html.TextBoxFor based on the value of another one

I have been trying to implement a basic jQuery functionality that involves changing the text in one textbox to be half of the numeric value entered in another textbox. Below is the script I am using: <script> $(document).ready(function () { $(& ...

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

Photographs featuring a ripple effect in the columns of Zurb's Foundation framework

Working on a WordPress site using the Foundation 6 CSS framework, I have a design with a row containing two large-6 columns, each filled with an image featuring a wave shape. Check out the image I've linked below. View the row with 2 columns I' ...

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this: var imgSrc = $(event.target).attr('src'); I then use this variable to add the image to a div and show it o ...

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

What is the best way to position a Radio group next to a TextField in Material UI

I've been through the documentation, but I'm struggling to understand how styling works in Material UI. Currently, I have a radio-group component set up like this: import React from 'react' import Radio from '@material-ui/core/Rad ...

Taking out the z-index from the transition code

Is there a way to restructure the code without needing to use z-index for the transition? Without z-index: https://jsfiddle.net/Legcb42d/ .container1 { position: relative; width: 100%; height: 100%; } .container1.slide { height: auto; min-heigh ...

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

I am facing a challenge with my AngularJS dropdown that uses ng-options. I want to apply both the filter and orderBy components together in the ng-options section. The filter for the select is functioning correctly, but it seems like the OrderBy component ...

Comparing User Inputs to Database Entries in PHP and MySQL: A Guide

I am currently working on an HTML form that includes a textbox for the user to enter their username and a login button. I want the database to be queried when the user clicks the login button and if there is a match, I would like to echo out a statement. T ...

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

Unable to locate template or render function for Vue Draggable Next component

Looking to incorporate Vue Draggable Next into a Vue 3 example page but encountering some challenges. I've attempted to follow the instructions in the repository. However, I ran into issues when importing the Vue Draggable Next component and had to re ...

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

The iteration count and stop code in CSS are failing to function correctly

Is there a way to make this loop once and then stay as is unless the page is refreshed? I've tried multiple methods I came across. Can you modify the code so I can see where the changes are being made? The goal is to have it display once and then per ...