Custom Two-row navbar in Bootstrap

I am trying to figure how how to accomplish a “conflict free” two row bootstrap-3 fixed-top navbar. I’m not sure if it actually needs to be two actual “navbars” by bootstrap definition. I am pretty good with coding, but don’t have a complete understanding of the bootstrap framework yet (only a few months of focused work), so I am struggling here a bit.

Optimally, the top row would be a background color of #f2f2f2 with a brand/logo on the left, and alert icons on the right such as messages icon, notification icon, and profile icon. One thing I can’t figure out is making these icons into drop-downs that don’t get hidden by the below menu since I am using the bootstrap navbar classes for both menu rows.

Second row would have a background of #337ab7 with the “page title” headline on the left, and the drop down navigation items on the right. I have created a basic concept and attached it here for better visualization.

One of my biggest problems is I cannot figure out for the life of me how to properly change the drop down menu styling in Bootstrap to match my concept attached. I just want a basic flat looking drop down menu with no rounded corners and it seems like Googling for “how to customize bootstrap drop down menu” (in various forms of that) brings me to basic coloring but not complete overhauls.

My code is missing something where the default link colors are turning grey after being clicked, and overall acting odd. So I am hoping for a fresh start here. I would really appreciate some help here as I’ve been pulling my hair out for a few days trying to get this to happen. I can share code, but it’s pretty ugly with my trial and errors. Thanks for any help you guys might be able to offer! bootstrap menu navigation


Source: jquery

Leave a Reply