On my website, I utilize two Bootstrap 3 navbars - one default and the other inverse. However, I have run into an issue when viewing the page on mobile devices. Both navbars collapse as expected, but extending the second navbar causes both to extend together. Similarly, collapsing the second navbar collapses both at once.
One issue is that your second toggle button targets both navbars with data-target=".navbar-collapse". Instead, assign an id to the second collapsible and target it using that, as shown in the example below (using #bs-example-navbar-collapse-2 here).
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white; margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="" class="img-responsive" href="#" style="padding-left:50px;">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
<div class="col-xs-offset-3 col-xs-6 text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search" style="padding-top:15px">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
<li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</a></li>
<li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</a></li>
</ul>
</div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="margin-left:5px;margin-right:5px">
<div class="navbar-header">
<!-- Note: data-target="#bs-example-navbar-collapse-2" -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>@Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
<li>@Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
<li>@Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
</ul>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>I'm struggling with formatting a form that is enclosed in a bordered fieldset. Currently, all the form fields are filling the entire width of the fieldset. However, I want certain textfields to be shorter and centered within the fieldset. I have attem ...
I am working on creating a virtual keyboard using jQuery. Whenever I press 'a' in the textarea, I want it to display 'z' instead. In my investigation of typing a letter in the textarea, I discovered the following sequence: keyDown ev ...
Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...
I am tasked with creating an HTML form that includes 3 select attributes (color, shadow, background-color). Depending on the user's selections, these attributes will be applied to a h1 element on the page. I need to achieve this without using JavaScri ...
Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...
Having some trouble with the HTML <br /> tag. I'm trying to stack 2 images on top of each other. When there is no <br /> between them, the bottom border of the top image touches the top border of the bottom image, which seems correct. Ho ...
Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...
Utilizing twitter bootstrap tabs, I aim to monitor the application of the active class on the li tag as users switch between different tabs. My objective is to control tab activation through custom buttons by modifying the class attribute to activate direc ...
I am currently utilizing express, MongoDB for the database, and EJS. I am in the process of developing a form that allows users to submit a new article for a blog. The goal is for the website to redirect back to the page with the form fields populated if a ...
Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...
I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible. Here is the CSS: .closed h2.accordion_h3 { background: url(mysource_files/down.png) no-rep ...
When I attempted to use the selectable feature on a table with a CSS class applied, the selection did not work. However, when I removed the CSS class, the selection worked perfectly fine. I suspect that the issue lies within the CSS definition, but I' ...
Attempting to send a put request: Put form code snippet: <form id="for" action="/people" method="post"> <div class=""> <input type="text" name="Name" value=<%= data[0].name %> > </div> ...
I am trying to display a checkbox as either checked or unchecked based on the value of a variable {{CurrentItem.STATUS}}, which can be either 1 or 0. Is there an Angular solution that does not require any javascript/typescript to achieve this? I want the ...
I am looking for a solution to incorporate the selection made from an HTML select element as a variable in my SQL query. Essentially, if a user chooses "iPhone" from the list, I want the query to be something like select * where name = iPhone. I am unsure ...
Seeking the (x,y) coordinates of an element using JavaScript, utilizing the offset property from jQuery. Here is my code snippet: var offsets = $('#11a').offset(); var top = offsets.top; var left = offsets.left; console.log("Coor ...
I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...
This is my first time reaching out here because I couldn't resolve the issue on my own. Please keep in mind that I am relatively new to Spring and not very experienced in Java and coding in general. I am working on creating a Server application using ...
I encountered an issue with my code related to the click events. The problem is that one click event doesn't work after another one. Here is my ajax and jquery code: <!-- Placeholder for confirmation modal when gevonden button is clicked, then u ...
I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...