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! https://i.sstatic.net/NU1jv.png

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

Modify the css with JQUERY when there are no rows inside the tbody section

Is it possible to change the css using jquery if there are no rows in the table body? I have attempted this but my current approach is not working. I tried adding an alert within the if statement, but the alert did not appear. My goal is to hide the table ...

javascriptjqueryhtmlcss

I'm looking for a design that features larger font size for the number before the decimal point compared to the numbers that follow it

Is there a way to achieve different font sizes for the numbers before and after the decimal point using AngularJS, similar to what can be done with jQuery by assigning classes? .tdSplit { text-align: right; } .tdGreen { font- ...

jqueryangularjs

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...

htmlreactjstypescript

The performance of the jQuery Slide Effect is choppy

I'm attempting a "click here for something new" feature using jQuery's slide function. The issue I'm facing is that the slide animation appears jerky due to the border set in the .toggleO class. While removing the border would solve this, I ...

jquery

How about showcasing bigger images in the main body of the page?

When it comes to using CSS sprites for images, the typical advice is to reserve it for smaller images like icons. Why should larger content images only be represented through <img> elements? Are there not benefits to utilizing spriting for all types ...

cssimagecss-sprites

What is the best way to align an avatar within a cardHeader component in the center?

Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...

javascriptcssreactjsmaterial-ui

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...

javascriptpythonhtmlajaxdjango

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

javascripthtmlcss

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

htmlcss

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

What steps should I take to resolve the problem while in Quirks mode?

My current design includes an element with a width of 200px, along with left and right padding of 100px each. However, I have observed that in IE7, IE8, and Firefox 4, the padding is being added to the total width of the element. On the other hand, in IE ...

htmlcss

Ever since updating from jQuery 1.4 to 1.5, there have been issues with data getting overridden

After updating to the most recent version of jQuery above 1.4, I noticed that my ajax posts are no longer accepting ?? (double question marks). Instead, they are being replaced with something like jQuery15206629880418804291_1302038490086 Using Firebug, I ...

jqueryajaxjson

JavaScript event manually triggered not propagating within an element contained in an iFrame context

I am currently developing a WYSIWYG designer that enables users to choose colors through [input type="color"] fields. The interface includes inputs on the left side and an iFrame on the right side displaying the generated preview. Normally, when ...

javascriptjqueryiframejquery-events

Issue with Fancybox Buttons not appearing on parent page upon opening

I previously asked for help on how to open fancybox from an iframe to the parent page. The solution worked perfectly and is still functioning well. Now, I've been requested to add left and right arrow buttons, but it seems that using the code to open ...

jqueryhtmlfancybox

Is there a way to detect the completion of the fadeout animation before calling a function?

I am trying to create a toast message using jQuery. When the "show" class is appended to the div, I want the toast message to fade in and then fade out after a few seconds. Once the fade-out animation is complete, I need to remove the "show" class. This ...

javascriptjquerycsswebkit

Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...

javascripthtmlioscss

How can I repeatedly show text using knockout js?

How can I use KnockoutJS to display the text and year within a div loop when selecting a brand and model? Example: Mercedes>C *C-180 *2016 *C-200 *2015 Here is the HTML code: <select data-bind="options: manufacturers, optionsCaption:'Bra ...

javascriptjqueryarraysknockout.jsnested

Floating elements overlapping fixed elements

I am currently in the process of developing a mobile application and encountering an issue with relative divs overlapping the top and bottom headers fixed with a z-index. Despite my attempt to resolve this by adding a z-index to the relative div, the probl ...

htmlcss

Annoying AngularJS Scrolling Problem

I am facing an issue with a Container that loads multiple views <md-content flex id="content"> <div ng-view></div> </md-content> One of the loaded views has the following structure: <div layout="column" id="selection-whit ...

htmlcssangularjsangular-material

Using AngularJS, you can display repeated elements in a single textarea by utilizing

--> I want to be able to input data into a textarea using just one textarea element. --> The reason for this is so that when the data in MySQL is updated, I can type new data in the textarea while still keeping the existing data. I have tried using ...

javascripthtmlmysqlangularjs