Creating a secondary menu below the navbar using Bootstrap 3's nav-pills component

Is it possible to create a secondary menu using Bootstrap 3 with nav-pills that behaves like a secondary navbar?

Check out this video tutorial

Here is the HTML code for my menu:

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li ng-class="{active: routeBeginsWith('/admin/users')}"><a href="#/admin/users"><span class="glyphicon glyphicon-user"></span> User Management</a></li>
      <li ng-class="{active: routeBeginsWith('/admin/sites')}"><a href="#/admin/sites"><span class="glyphicon glyphicon-globe"></span> Site Management</a></li>
      <li ng-class="{active: routeBeginsWith('/admin/email')}"><a href="#/admin/email"><span class="glyphicon glyphicon-envelope"></span> Email Settings</a></li>
    </ul>
  </div>
</div>
csstwitter-bootstrap-3

Answer №1

To ensure the nav-pills stay fixed below the primary navigation, consider placing them in a container with a position:fixed property. Keep in mind that this approach may require additional adjustments for mobile responsiveness.

.nav-2{
  position:fixed;
  top:50px;
  left:0px;
  width:100%;
  background:#eee;
}

Example: http://www.bootply.com/I4e9jzllNT#

EDIT: Improved for mobile compatibility

If you ensure your primary navigation is responsive and adjust margins and padding accordingly, the solution should work well on mobile devices too: http://www.bootply.com/ozq7nO6H2O

.nav-2{
  position:fixed;
  top:50px;
  left:0px;
  width:100%;
  background:#eee;
  padding-top:10px;
  padding-bottom:10px;
  z-index:2;
}

(the addition of z-index:2 resolved the final issue after some discussion in chat)

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

Not all CSS custom properties are functioning properly, despite being included in the HTML code and being visible in the inspector tool

I've been experimenting with implementing different themes on my website. I modified my main stylesheet to include variables and created three additional "theme" stylesheets that define these variables at the :root level. The HTML file then connects t ...

javascripthtmlcsscss-variables

The issue of Bootstrap form fields not remaining within their parent div persists

I need assistance with creating a bootstrap form that is visually appealing on both web and mobile platforms. The standard markup doesn't seem to be working effectively. This is an angular application, but I don't believe angular is causing the i ...

htmlcssangularjstwitter-bootstrap

Reduce the transparency of the overlay picture

I have been utilizing the 'Big Picture' template to design a webpage. The overlay.png file adds a lighter background effect by overlaying intro.jpg with a partially transparent blue graphic. Despite my efforts to adjust the opacity and gradient/R ...

htmlcsstemplatesxhtml

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: https://i.sstatic.net/zXInr.png So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; bor ...

css

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

javascriptcssangularjs

Creating unique CSS div designs based on the nth-child selector

I have created a website layout. https://i.stack.imgur.com/6FSEb.png I have included the file showing the design. The data in the boxes will come from a MySQL database. My query is, can it be done with just one query? Currently, I am running separate q ...

htmlcss

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

Working on a website layout that features a navbar at the top and a datatable below. However, when hovering over the navbar to reveal subitems, I notice a transparency issue where the navbar overlaps with the datatable. Below is a simplified version of my ...

javascripthtmlcssdatatables-1.10

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

When utilizing Backgrid for editing values in a table, an <input type="text"> is inserted inside the <td>. Despite setting the input to max-width: 100%, it can still cause the column to expand beyond desired dimensions. To see this behavior in ...

cssbackgrid

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Below is the code snippet from my JSX file: import { useState, useEffect } from "react"; import { PropTypes } from "prop-types"; import { HashtagIcon } from "@heroicons/react/24/outline"; // Function to fetch categories from the API (temporary replaced wi ...

cssreactjsmaterial-uitailwind-cssborder

Adjust the size of a division based on the width of the screen using JavaScript

Is there a way to create a JavaScript function that dynamically adjusts the size of a div, image, or padding based on the screen width without using CSS? I am specifically interested in adjusting the padding of a div element. Here is a sample code snippet ...

javascripthtmlcss

Creating a corner ribbon for a Material UI Card: A step-by-step guide

Can anyone provide pointers on incorporating a corner ribbon to a Material-UI card? Currently, I am utilizing makeStyles for styling from Material UI. ...

javascriptcssreactjsmaterial-ui

Changing colors in the rows of a table

Here is a fiddle I created to demonstrate my issue. https://jsfiddle.net/7w3c384f/8/ In the fiddle, you can see that my numbered list has alternating colors achieved through the following jQuery code: $(document).ready(function(){ $("tr:even").css("ba ...

javascriptjqueryhtmlcss

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Automatically play the elements within a div using jQuery

I have various sections within different divs that I want to display without the need for manual clicking on tabs. While I've been able to toggle the visibility of these sections by clicking, I would prefer them to display automatically in a loop usin ...

javascriptjqueryhtmlcss

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

Creating an efficient login system for my website - where do I start?

I've recently started diving into the world of web development, starting with HTML, CSS, and a bit of JavaScript. However, I've hit a roadblock - while I can perform basic styling, I'm struggling to make my projects interactive. My main que ...

javascriptpythonphpcss

What is the name of the scrolling header effect achieved in the following?

I've been seeing a lot of people using a unique header effect lately and I'm curious to learn more about how it's done. Can anyone explain the process behind achieving this effect, what it's called, and if there are any good tutorials a ...

javascriptjquerycss

Divs animated with jQuery keep on moving even after the animation has finished

My current project involves animating a single circle that scales, collides with two nearby circles, and then causes those circles to animate to specific positions. While everything works as expected, there is an issue where the two circles involved in the ...

javascriptjquerycssanimationjquery-animate