For my C# mvc Razor _layout page I've not been able to find a solution for implementing a 2 row Header/Navbar for a Bootstrap page using navbar-top-fixed

My design calls for

a simple 1 row feature at the top with hyperlinks to contact info and links to social media.

and below

A standard bootstrap navbar

Here is a screen shot illustrating what I need to implement ( from the template that I purchased to build the site )


2 row Bootstrap Navbar 1

The 2 row menu in that implementation has no navbar-top-xxx class in either row.

When I run my version with class="navbar-top-fixed" class on the lower row -- (the standard Bootstrap navbar)

There is a thin space between the 2 sections ( about a 10 px horizontal bar) that allows a small slice of the body of the page to show when it scrolls up behind the fixed-top navbar.

With the exception of that thin gap between the 2 rows, the navbar-top-fixed class does work hiding the scrolling body of the page


The top navbar does not behave responsively

The bottom menu works properly on small/xsmall


the social media icons to not wrap ... only the leftmost ( phone email links ) appear at top when displaying on a phone -- even tho that top row is configured as a set of two xs-small-12 columns

(The standard Bootstrap navbar below works perfectly (

I believe that my code is in line with standard Bootstrap conventions but I am not reporting this as a bug My design seems to be unsupported functionality.

Apparently additional scripting is needed to make it work.

I'm looking for an answer that shows a best practice to:

Eliminate the gap between the 2 rows that allows the body of the page to peek through the thin space between the 2 rows of my two part menu

Make the top menu truly responsive and stack the 2 sides of the top menu one on top of the other when the page falls into the sm-xs size ??

Possibly Angular or jQuery functions that injects the top menu above the standard navbar after the page is loaded ? All suggestions appreciated. Thanks, Steve