Bootstrap causing issues with multinavibar functionality

Hi everyone, I have been using multinavbar but when I view it on mobile, the toggle and menu are not working properly.

Below is the code snippet for reference:

<div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px;margin-top: -51px;width: 1134px;margin-left: 143px;">     
    <div class="navbar-header" style="margin-top: 29px;">
        <div class="navbar-header"><a class="navbar-brand" href="#">News</a></div>

    </div>


</div>
<div class="navbar  navbar-default navbar-static-top" role="navigation" style="margin-top: -19px;width: 1134px;margin-left: 143px;height: 45px;">       <div class="navbar-header">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#"></a>
        </div>

    </div>

    <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NEWS <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">MOVIE NEWS</a></li>
                <li><a href="#">OTHER NEWS</a></li>

              </ul>
            </li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">REVIEWS <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">MOVIE REVIEWS</a></li>
                <li><a href="#">AUDIO REVIEWS</a></li>

              </ul>
            </li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">VIDEOS <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">TRAILERS </a></li>
                <li><a href="#">POPULAR VIDEOS </a></li>
               <li><a href="#">Audio launch in US is a bad idea </a></li>
               <li><a href="#">SHORTS </a></li>
                <li><a href="#">OTHERS </a></li>

              </ul>
            </li>
             <li><a href="#about">INTERVIEWS</a></li>
            <li><a href="#contact">KIDS</a></li>

        </ul>
...

I am facing some issues with viewing this on mobile as the toggle and dropdown functionalities are not working. Any help or suggestions would be highly appreciated. Thank you!

Best regards,

csstwitter-bootstrap

Answer №1

Place your navigation bar within a div.container.

You should ensure that the toggle button addresses the correct data-target, which in this case should be .navbar-collapse instead of #navbar, which does not exist in the provided example (although there is one in the commented-out code). 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="navbar navbar-default navbar-static-top" role="navigation">     
      <div class="navbar-header" style="  margin-top: 29px;">
          <a class="navbar-brand" href="#">News</a>
      </div>
  </div>
  
  <div class="navbar  navbar-default navbar-static-top" role="navigation">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
          <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="#"></a>
      </div>
  
      <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NEWS <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">MOVIE NEWS</a></li>
                  <li><a href="#">OTHER NEWS</a></li>
  
                </ul>
              </li>
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">REVIEWS <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">MOVIE REVIEWS</a></li>
                  <li><a href="#">AUDIO REVIEWS</a></li>
  
                </ul>
              </li>
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">VIDEOS <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">TRAILERS </a></li>
                  <li><a href="#">POPULAR VIDEOS </a></li>
                 <li><a href="#">Audio launch in US is a bad idea </a></li>
                 <li><a href="#">SHORTS </a></li>
                  <li><a href="#">OTHERS </a></li>
  
                </ul>
              </li>
               <li><a href="#about">INTERVIEWS</a></li>
              <li><a href="#contact">KIDS</a></li>
  
          </ul>
          <div class="col-sm-3 col-md-3 pull-right" style="margin-top: -22px;">
          <div class="navbar-text"></div>
          <form class="navbar-form" role="search">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
              <div class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
              </div>
          </div>
          </form>
          </div>
  
      </div>
  </div>
</div>

Answer №2

**DEMO **

This is a functional layout...

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-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="#">NEWS</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">HOME</a></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               NEWS <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">MOVIE NEWS</a></li>
               <li><a href="#">Other NEWS</a></li>

           </ul>
         </li>

         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               REVIEWS <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">MOVIE REVIEWS</a></li>
               <li><a href="#">AUDIO REVIEWS</a></li>

           </ul>
         </li>

         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               VIDEOS <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">TRAILERS </a></li>
                <li><a href="#">POPULAR VIDEOS </a></li>
               <li><a href="#">Audio launch in US is a bad idea </a></li>
               <li><a href="#">SHORTS </a></li>
                <li><a href="#">OTHERS </a></li>

           </ul>
         </li>
           <li><a href="#about">INTERVIEWS</a></li>
            <li><a href="#contact">KIDS</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

Positioning CSS Div After Absolute Positioning Div

Can anyone provide guidance on how to smoothly continue the flow of a page using CSS? Let me explain my current dilemma: I have 3 divs - div 1 (parent), div 1 (child), and div 2 (normal). The parent div is absolute, the child is relative. Everything seem ...

htmlcss

Holding off on routing the pathName through the router until the next-page-transitions have been completed

In my current setup, I have two distinct elements at play. Using the code snippet below: className={router.pathname.startsWith("/pagename") ? "menu-active" : ""} I am able to apply the menu-active class to the pagename naviga ...

javascriptcssreactjsnext.jscss-transitions

The issue lies in the alignment of the navbar at the top

After retrieving this script: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <nav class="navbar bg-light navbar-expand-sm justify-content-center"> <a class="navbar-brand" ...

htmlcsstwitter-bootstrapbootstrap-4

Automatically transferring CSS class attributes to a newly created class

The Issue I've encountered a problem while developing a small app for a website. The form in the app requires validation, but conflicts with existing jQuery scripts have been causing errors. These conflicting styles are essential to maintain the desi ...

jqueryhtmlcss

What is the best way to make a sliding DIV appear at the edge of the browser window?

I recently came across a really interesting effect on a webpage. After arriving on the page, a slide-in window appears after about a minute. It slides in from the right side, remains at 250x180 for around ten seconds, then shrinks to 250x50 and stays visib ...

jquerycss

Including new styles in CKEDITOR.stylesSet that pertain to multiple elements

My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...

csscross-browserckeditor

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

javascriptcssvue.jsdialogprimevue

"Excessive overflow results in the displacement of the following block

When viewing on smaller screens, the blocks move down due to oversized images causing overflow. Is there a way to simulate collision in this scenario? <div class="image"> <img src="img/1.jpg" /> </div> <div class="image"> & ...

htmlcsssass

What is the best way to access bootstrap col and row styles without needing to import the entire framework?

I am currently in the process of developing a react app using styled-components and I am looking to design a component that mimics the functionality of the col col-x classes from bootstrap. Additionally, I also want to create another component for the row ...

cssreactjstwitter-bootstrapbootstrap-4

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...

javascripthtmlcss

How to Perfectly Position Content with Bootstrap 3's Full Width Image Carousel

Here's my query: Is there a way to adjust the position of my content (such as text) inside the slider responsively? The text can be positioned anywhere within the Div Slider, for example, at 25% from the left and 50% from the top within the Image Di ...

htmltwitter-bootstrapcss

Unusual dark streak beneath the Wordpress emblem

I recently created my website using Wordpress and decided to use a PNG image (140*82 px) as the logo instead of the default "site-title". However, I encountered an unusual issue where a black line appeared just below the image. After checking my "header.ph ...

phphtmlcsswordpress

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Looking to create a unique vertical scrolling "carousel" using Google's Materialize CSS library. I have a good understanding of the steps required to construct a carousel. # haml %ul.carousel %li.carousel-item Some Content %li.carousel-item ...

javascriptjqueryhtmlcssmaterialize

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

Using jQuery to target the element before

Is there a way to determine the width of elements located before an element when it is hovered over? I attempted to achieve this using the following code: $('ul li').hover(function() { $(this).prevAll().each(function() { var margin = $(this ...

javascriptjqueryhtmlcss

A guide on incorporating the CSS 'content' property with the 'option' tag

Is it possible to include CSS 'content' in the 'option' tag? For example, I want to display "Name: Volvo". <html> <head> <style> option:before { content: "Name: "; } </style> </head> <body> ...

htmlcss

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js