tsaltd
04-26-2016, 11:49 PM
For my C# asp.net 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 ) –
SCREENSHOT: 211
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
Secondly
• The top navbar does not behave responsively –
The bottom menu works properly on small/xsmall
But
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
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 ) –
SCREENSHOT: 211
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
Secondly
• The top navbar does not behave responsively –
The bottom menu works properly on small/xsmall
But
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