The collapsible navigation bar in Bootstrap

I'm having issues with my Bootstrap collapsible menu. Can someone help me identify the problem?

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
       <a class="navbar-brand" href="#top">the company</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div id="#myNavbar" class="menu collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
      <li class="scrollable"><a href="#about" class="active scrollable">About Me</a></li>
      <li class="scrollable"><a href="#portfolio">Portfolio</a></li>
      <li class="scrollable"><a href="#contact">Contact Me</a></li>
    </ul>
    </div>
  </div>
</nav>
htmlcsstwitter-bootstrap

Answer №1

There are multiple divs with duplicate attributes for class, as well as redundant data-toggle="collapse" & data-target="myNavbar".

In addition, the target ID should not include the "#" symbol: change id="#myNavbar" to id="myNavbar"

Make sure to validate your HTML and consult the Documentation https://i.sstatic.net/MgubE.png

Example of correct implementation:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#top">the company</a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="myNavbar" class="collapse navbar-collapse menu">
      <ul class="nav navbar-nav navbar-right">
        <li class="active scrollable"><a href="#about">About me</a>
        </li>
        <li class="scrollable"><a href="#portfolio">Portfolio</a>
        </li>
        <li class="scrollable"><a href="#contact">Contact Me</a>
        </li>
      </ul>
    </div>

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

Answer №2

The issue stemmed from:

  • Your collapse navbar hierarchy.
  • The use of the menu class within a div.
  • Syntax errors.

  • The anchor tag: 

    <a class="navbar-brand" href="#top">the company</a>
    should be placed after the button tag.

  • Ensure that the menu class is included alongside other classes in this format: 

    <div id="myNavbar" class="menu collapse  navbar-collapse">
    , instead of 
    <div class="menu" id="#myNavbar" class="collapse  navbar-collapse">

  • Change <div id="#myNavbar" to <div id="myNavbar". Remove the # symbol when assigning an id to a div.

  • Lastly, do not repeat 

     data-toggle="collapse" data-target="myNavbar">
    in the ul tag. Simply use 
    <ul class="nav navbar-nav navbar-right">

Run the provided code snippet below and remember to include Bootstrap and jQuery libraries on your webpage. Cheers!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
       <a class="navbar-brand" href="#top">the company</a>
    </div>
    <div id="myNavbar" class="menu collapse  navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="scrollable"><a href="#about" class="active" class="scrollable">About me</a></li>
      <li class="scrollable"><a href="#portfolio">Portfolio</a></li>
      <li class="scrollable"><a href="#contact">Contact Me</a></li>
    </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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

Adjustable positioning and size of dropdown menu (triggered by clicking)

Currently developing the following webpage: https://jsfiddle.net/t9f2ca4n/212/ Check the raw code at the bottom of the page. The issue at hand involves adding two buttons for each line item (Item I or Item II) to display setup details under "Cate ...

javascripthtmlcssdropdown

Currently in the process of refreshing a Drupal website with only access to a HostGator login

I've taken on a last-minute favor for a friend who needs a quick Valentine's Ad added to their existing website, which was built with Drupal in 2010 by someone they no longer have contact with. I don't have much experience with Drupal, but I ...

htmldrupalhosting

a closing button for collapsing all expanded accordion sections in Bootstrap

Is it possible to create a button that closes all currently opened accordion items, while still retaining the toggle functionality? I know it might seem strange since accordions typically have toggles built in, but in my case, I need an external button to ...

javascripthtmljquerycssbootstrap-4

The ng-view directive within AngularJS appears to be malfunctioning

I am facing an issue with my simple Angular app. I have two links that are supposed to change the URL and display the correct view within the same single page application. However, when I include the controllers' module in the main module, it stops wo ...

javascripthtmlangularjs

When you zoom in, the HTML elements tend to shift out of place

Spent the entire day yesterday attempting to make my page responsive while Zooming In, but I just can't seem to get it right. Even after adding height and weight, elements still get mixed up when zooming in on the page. I've scoured countless w ...

javascripthtmlcss

In HTML, the size and position of an <a> element cannot be altered or adjusted

I am having trouble with an anchor element that is contained within a div. No matter what I try, I cannot resize or move it up or down without it covering its sibling element. I have attempted using transform-translate and margin properties, but to no avai ...

htmlcsssassscss-lint

Inserting Multiple Inputs

I have a unique application interface that is structured in the following manner: The rows within the application consist of either group headings (displayed as rows with single inputs) or ingredient forms (comprising a small input field, followed by a se ...

phphtmlmysqlforms

Utilizing a lone div for clearing a float

For a long time, my go-to method for clearing floats has been using <div style="clear:both;"></div>. However, I recently began wondering if in HTML as XML, could I simply use <div style="clear:both;" /> since they essentially serve the sa ...

htmlcssxml

Transforming iframe programming into jquery scripting

Currently, I have implemented an Iframe loading the contents within every 5 seconds. It works well, however, there is a consistent blinking effect each time it loads which can be quite bothersome. I am looking to replace the iframe with a scrolling div so ...

javascriptphpjqueryhtmliframe

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

javascripthtmlcss

What is the best way to repair a table header?

How do I make the table header fixed so only the table body scrolls? * { padding: 0px; margin: 0px; } body { padding: 0px; margin: 0px; } .responsive { max-width: 100%; height: auto; } /* Other CSS code here */ /* Include necessary exter ...

jqueryhtmlcssbootstrap-4fixed-header-tables

Adjusting iframe height based on its source URL using JQuery

Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container. The challenge I am facing is ensuring that the script only affects YouTube videos and ...

javascriptjqueryhtmlcssiframe

Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed. Register.html <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <l ...

javascripthtmljquerycssbootstrap-4

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

cssangularangular-material

Assigning the XSL value as an identifier for the element

I'm attempting to generate an HTML file from XML by using XSLT. One of the challenges I'm facing is utilizing a value extracted from the XML as an ID for a specific element on the page. Unfortunately, the XSL fails to compile when I attempt this. ...

javahtmlxslt

Sending a different name for the jQuery parameter

I'm looking to select CSS settings based on the presence of a data tag. What would be the correct approach for this? var datadirection = 'left'; //default direction if( $(this).attr('data-right') ){ datadirection = 'righ ...

jquerycssfunctionparameters

Adjusting Iframe height on mobile devices based on window width changes across various devices

I'm dealing with an issue on my URL shortener website involving iframes. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="<?=$adurl?>"></iframe> When viewing the websites in ...

phphtmliframemobilemobile-devices

Changing the color of an image with a click event in HTML

My coding dilemma involves two HTML codes: one displaying a table with grey square buttons, and the other featuring the same table but with orange buttons instead. I am looking for a way to change the color of the button from grey to orange when clicked, ...

htmlbuttoncolors

Angular can be used to compare two arrays and display the matching values in a table

Having two arrays of objects, I attempted to compare them and display the matching values in a table. While looping through both arrays and comparing them by Id, I was able to find three matches. However, when trying to display these values in a table, onl ...

javascripthtmlarraysangularloops

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

javascriptjqueryhtmlcss