Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the Bootstrap framework is still evolving (only a few months of concentrated work), and this particular task is posing some challenges.

The ideal scenario involves the top row featuring a #f2f2f2 background color with a brand/logo on the left and alert icons (such as messages, notifications, and profiles) on the right. However, one roadblock I am facing is ensuring that these icons remain visible as dropdowns without being hidden by the lower menu, given that both rows utilize Bootstrap's navbar classes.

The second row should have a #337ab7 background with the headline "page title" on the left and dropdown navigation items on the right. I have sketched out a basic concept which I have included for better visualization.

My major challenge lies in customizing the appearance of the dropdown menus to align with the attached visual concept. My goal is to create a simple, flat design for the dropdown menu without rounded corners. Despite my efforts to search for ways to customize Bootstrap dropdown menus, the results have only led me to minor color changes rather than extensive modifications.

Moreover, I have noticed an issue in my code where default link colors turn grey after being clicked, resulting in overall erratic behavior. Hence, I am eager to start anew and seek assistance from the community. I would greatly appreciate any guidance or support in resolving these issues, as I have been struggling with them for several days now. While I can share my code, it is riddled with trial and error attempts. Thank you in advance for any help you may be able to provide!

jqueryhtmlcsstwitter-bootstrap

Answer №1

Here's an illustration of the concept you are attempting to implement. While it may not cover all your requirements, it should give you a good starting point.

The upper section (located above the main nav) consists of a div enclosed by the navbar class and a container, featuring standard Bootstrap Nav components. Understanding how these elements work together is key in my opinion.

I hope this provides some insight.

body,
html {
  margin-top: 100px;
}
.navbar.navbar-custom {
  border-radius: 0px;
  border-left: transparent;
  background: #337ab7;
}
.navbar-custom .upper-nav {
  font-size: 20px;
  padding: 9px 20px;
  height: 50px;
  color: #337ab7;
  background-color: #f2f2f2;
}
.navbar-custom .upper-nav img {
  margin-top: 0px;
}
.navbar-custom .navbar-nav {
  margin-right: 30px;
}
.navbar-custom .nav-buttons {
  border-radius: 0px;
  background: none;
  border: none;
  color: #337ab7;
}
.btn-group .dropdown-menu > li > a {
  color: #fff;
}
.btn-group .dropdown-menu > li > a:hover {
  color: #444;
}
.navbar-custom .navbar-nav .dropdown-toggle {
  color: #fff;
}
.navbar-custom .navbar-nav > li > a {
  border-right: 1px solid #fff;
}
.navbar-custom .navbar-nav > li:first-child {
  border-left: 1px solid #fff;
}
.navbar-custom .navbar-header .navbar-brand {
  color: #fff;
}
.navbar-custom .dropdown-menu {
  background: #444;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu {
  color: #fff;
  border-bottom: 1px solid #fff;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu:hover {
  color: #444;
}
.wrapper {
  height: auto;
  background-color: #fff;
  margin-top: 0px;
  padding: 10px 20px;
}
.well {
  background-color: transparent;
  border: 3px solid #428bca;
  border-radius: 0px;
  text-align: center;
  font-size: 25px;
}
@media (max-width: 768px) {
  .navbar-custom .navbar-nav {
    margin-right: 0;
  }
  .navbar-custom .navbar-nav > li > a {
    color: #fff;
    border: none;
  }
  .navbar-custom .navbar-nav > li:first-child {
    border: none;
  }
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
    <div class="upper-nav">
      <img src="http://placehold.it/150x30/444/fff?text=Logo">
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-inbox" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-off" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#">Page Title</a>

    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="wrapper">
  <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
    facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
    auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
    egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
  <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
    aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
    fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
  <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
    sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
    arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
    vestibulum eu sit amet urna.</p>
  <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
    neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
    tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
  <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
    consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
    lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>

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

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

javascripthtmlcss

The function you are trying to execute in jQuery Mobile is not defined

I'm currently working on creating an external panel, but I've encountered some difficulties. Below is the HTML code: <html> <head> <title>My Page</title> <meta name="viewport" content="width=devi ...

javascriptjquery

Using jQuery to dynamically retrieve a radio button

After struggling with this issue for quite some time, I have come to the realization that it's too complex for me to handle on my own. I could really use some assistance here. The problem at hand involves a page displaying various products, each of w ...

javascriptjqueryradio-button

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

htmlcssreactjsmaterial-uiuitextfield

Moving SVG fill in a continuous loop

After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization. Initially, I thought that applying the animation rules directly to the <g> tag grouping all the ...

csssvgcss-animations

The information in the table is spilling out beyond the boundaries

I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the d ...

htmlcssasp.net-mvctwitter-bootstrapdatatables

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...

htmljquery

Set the background color of a webpage depending on the data retrieved from the database when a specific radio button

I am facing a challenge with my radio buttons that are set to light up green when the page loads. However, I am working on an "order system" where I need a specific button or "locker" to appear red instead of green when the page loads. While I have succes ...

phphtmlcss

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

javascriptcssgoogle-chromepdf

Changing the icon dynamically when a user unfollows through an AJAX request

I have created a follow icon (button) that allows signed-in users to click on it and add the game to their list using AJAX. However, I need help with switching the button icon and class. I'm not very familiar with JavaScript or AJAX. This is the cur ...

phphtmlmysqlajax

What is the best way to utilize Ajax and Jquery in order to retrieve data from a PHP database and dynamically update elements with the fetched information?

I am currently enhancing a website to simplify the process for employees when editing products. At present, in order to change prices, someone has to log in to the database and manually alter them, followed by making adjustments to the HTML of the website ...

phpjquerydatabaseajax

What exactly does the response represent within the success function parameter (response) in AJAX?

I'm a bit confused about my approach. I am passing a URL for an Ajax 'GET' request with query parameters (?abc='a'), but when I console.log(response) in the success function, the response doesn't contain the abc value. ...

jqueryajaxurl

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

I need help including an HTML page using ng-click within ng-repeat. However, it is currently loading all the content for every ng-repeat element. My specific requirement is to only bind(ng-include) the clicked element. Please see the attachment for m ...

javascriptjqueryangularjshtml

Ways to access c# session data using jquery and fetch attributes

Within my code, I have a user class which contains an id as integer and a name as string. This class is stored in a session once the user logs in. How can I retrieve the id of the object from this session using jQuery? ...

jqueryasp.netsession

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG

I have successfully implemented CSS hover effects and can manipulate the HTML to use the .active class. However, I am facing difficulties in making my pie slices switch to the active state upon click. Moreover, once this is resolved, I aim to enable select ...

javascripthtmlcsssvgpie-chart

A step-by-step guide on how to display a specified amount of images in the center of

I'm currently working with a div that displays images dynamically loaded from a database, ranging from 1 to 5 images. The number of images may vary each time, and I need assistance in centering these images inside the div regardless of their quantity. ...

htmlasp.netcss

Enhance jQuery UI slider by updating the range values

I am attempting to update a jQuery UI range slider with values from two text boxes. var minVal = $(this).find('.minTextBox').val(); var minVal2 = parseInt(minVal); var maxVal = $(this).find('.maxTextBox').val(); var m ...

jqueryjquery-uijquery-ui-slider

Tips for utilizing the jquery columnize plugin in conjunction with AngularJs

I am looking to utilize the columnize plugin from jQuery to create columns in my AngularJS application. Initially, I attempted the following straightforward approach: .directive('columnize', function() { return { restrict: 'A&ap ...

jqueryangularjsmultiple-columns

Displaying a Jquery slider by clicking on links

I am interested in setting up a slider for two different forms. Specifically, I plan to have one form labeled Form 1 and another labeled Form 2 displayed as text. When users click on Form 1, a table containing the form will slide out from underneath the ...

javascriptjquery

Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...

javascripthtmlcss