Related
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
I have been working on a self-project to duplicate the reddit page for javascript using the JSON data available. But am not able to replicate the behaviour of the original website in its header section, where the header is responsive (behaviour when screen size is decreased).
GIF : how the original website header section works.
The problem :
Overlap the right side (Login page options) over the left hand side. The overlapping is such that the behind text is not shown. I have managed to do the overlapping, but since the background for the divs are translucent, the behind text too shows. Can't think of any solution for this.
GIF : my header (behind text seen)
The navbar elements transcend down when space is not enough. This is not how it is in the original, where they get hidden by the more and Login section. I cannot figure out how to go about having it in a single row.
GIF : my header (header elements move down)
A smaller, similar sample snippet :
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
}
#top-right-div{
position: absolute;
right: 0;
z-index: 1000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
In case you want to check with the full project, the link on Github.
An interesting point to Note : in the header, the left sided titles are being overlapped by the right sided section. So it is a smooth transaction where the possibility is such that even partial of the text is seen in a title when overlapped. Basically its not a matter of making the title element invisible by width as that would make the whole title invisible.
Ex :
The title has TODAYIL
The title has TODAYILEARNED (whole of the title)
If you're able to use CSS flexbox, I think this solution works the way you want:
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
display: flex;
}
#top-left-div {
flex: 1 1 0%;
overflow: hidden;
display: flex;
white-space: nowrap;
}
#top-right-div{
flex: 0 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
What I did:
Make .custom-top-header-container display:flex to ensure the left and right display side-by-side.
Make #top-right-div only ever take up the space that its content needs (i.e. don't grow or shrink)
Make #top-left-div fill whatever space remains in the container, and use overflow:hidden to hide any content that might overlap with #top-right-div on small widths.
Set #top-left-div to white-space: nowrap to prevent links with spaces (like "My Subreddits") from breaking onto multiple lines when the screen shrinks small enough.
I've managed to implement a pure-CSS solution without flex of what I assume you wanted to get.
I will highlight some of the changes I've made (the ones that don't directly pertain to the problem and could therefore be overlooked):
Got rid of .navbar, .navbar-static-top, .navbar-header, .custom-header-full and .custom-top-header-container. Please find a way to overwrite their behaviour at your own time if you really need those classes. I can try to help if it proves too difficult.
Removed CAPS LOCK from source and substituted it with text-transform: uppercase; inside the CSS file. This can really help in the future if one happens to fall asleep while adding a new navigation link.
Substituted "▼" with an HTML entity (▼). Modern browsers normally don't care, but it's still good practice.
Here is a Fiddle of the end result. Let me know if you have any questions.
A little hack can help you I guess. Try doing these CSS changes :
#top-right-div {
position: absolute;
right: 0px;
z-index: 1000;
background: rgba(255,255,0,1);
}
And add background: rgba(0, 0, 0, 0.7); to the .navbar-brand under top-right-div in html.
This would create an illusion of what you are trying to achieve.
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7); /* translucent */
position:absolute;
top:0;
width: 100%;
display: flex;
}
#top-left-div {
flex: 1 1 0%;
overflow: hidden;
display: flex;
white-space: nowrap;
}
#top-right-div{
flex: 0 0 auto;
background: rgba(255,255,0,1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="navbar navbar-static-top custom-header-full">
<!-- TOPMOST header with Links and Login/Signup -->
<div class="navbar-header custom-top-header-container">
<!-- Left side with various links -->
<div id="top-left-div">
<a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
<a class="navbar-brand" href="#">POPULAR</a>
<a class="navbar-brand" href="#">ALL</a>
<a class="navbar-brand" href="#">RANDOM</a>
</div>
<!-- Login/Signup on the right -->
<div id="top-right-div">
<span class="navbar-brand" style="background: rgba(0, 0, 0, 0.7);">Want to join?
Log in or sign up
in seconds |
<button class="glyphicon glyphicon-wrench tools-icon"></button>
</span>
</div>
</div>
</div>
for Overlap you can use this style:
.custom-header-full{
background: rgba(255,255,0,1);
}
/* Top */
.custom-top-header-container{
background: rgba(0,0,0,0.7);
position:absolute;
top:0;
width: 100%;
}
#top-right-div {
width: 45%;
float: left;
}
#top-left-div {
display: inline-block;
width: 53%;
float: left;
}
Like :demo
and other device you can use media queries Like :
#media (min-width:0px) and (max-width:799px) { add style }
write style according to device.
i thing it's helpful for you.
To handle the stretching issues. Try to inspect the website using responsive option
responsive button
Then you can know the dimension of the screen when the texts are overlapping or the navigation bar is two line high
get the width
So at last you can add your media query to create differences from the desktop website. In case it's 450px
#media only screen and (max-width: 450px) {
/* Add your css specification here. */
}
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.
As others have stated adding a padding-top to body works great.
But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.
This solved these kinds of issues for me
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)
a much more handy solution for your reference, it works perfect in all of my projects:
change your first line from
.navbar.navbar-fixed-top
to
.navbar.navbar-default.navbar-static-top
Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!
The solution for Bootstrap 4, it works perfect in all of my projects:
change your first line from
navbar-fixed-top
to
sticky-top
Bootstrap documentation reference
About time they did this right :D
#Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
This issue is known and there's a workaround in the twitter bootstrap site:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of padding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
This worked for me:
body { padding-top: 40px; }
I put this before the yield container:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.
EDIT - this works much better:
#media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the body padding in the first place? I have been searching for a solution to this problem, and here is what I came up with:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.
I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
For handling wrapping lines in menu-bar, apply an id to the navbar, like this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
and add this small script in the head after including the jquery, like this:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
That way, the top-padding of the body gets automatically adjusted.
use this class inside nav tag
class="navbar navbar-expand-lg navbar-light bg-light sticky-top"
For bootstrap 4
for Bootstrap 3.+ , I'd use following CSS to fix navbar-fixed-top and the anchor jump overlapped issue based on
https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
All you have to do is
#media (min-width: 980px) { body { padding-top: 40px; } }
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
I replaced the require in the "bootstrap_and_overrides.css" to:
=require twitter-bootstrap-static/bootstrap.css.erb
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
#import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
#import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
If the require statement is before the body CSS, it will not take effect.
I would do this:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
This works and looks good for me.
<body class="pt-5 mt-4">....</body>
I just wrapped the navbar in a
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
No fancy hocus pocus but it worked..
I am facing a strange problem with Polymer core-icon. Below is my snippet:
...
...
<link rel="import" href="../bower_components/core-icons/iconsets/social-icons.html">
...
...
<post-card id="card-1">
<div>Something in bold!</div>
<h2>My first post-card element with core-icon</h2>
<p>Core-icon is not rendering properly on Firefox...Please help!</p>
<core-icon class="large-icon" icon="android"></core-icon>
</post-card>
And my post-card element looks like this:
...
<div class="card-header" layout horizontal center>
<content select="img"><img src="images/{{imgsrc}}" alt="" /></content>
<content select="h2">{{heading}}</content>
</div>
<content select="p">{{para}}</content>
<content></content>
...
When I am running the above in Chrome the icon is rendering fine but on Firefox the icon is only flashing once and then disappears!
Rest of the content placed inside insertion point are rendering OK on both browsers.
Following screenshot shows what I have on different browsers:
For creating post-card element I have referred the following link:
https://www.polymer-project.org/0.5/docs/start/tutorial/step-2.html
I have started with Polymer recently. Looking forward to expert help.
Thanks in advance
Ok. I got it to work!
It is the CSS which was not working the similar way in Chrome and Firefox. I had a background property #ffffff set in the CSS for post-card element which surprisingly was overlapping the icons on Firefox! When I set the bacground property to "none" icons appear fine in both browsers!
:host {
/*background: #ffffff;*/
background: none;
position: relative;
padding: 0;
font-size: 1.2rem;
margin-bottom: 8px;
box-shadow: 2px 2px 2px #888888;
#include respond-to(handhelds) { width: 100%; clear:both; display:block !important; background:#ccff00;}
#include respond-to(medium-screens) { width: 30%; float:left; background:#dddddd; }
#include respond-to(wide-screens) { width:25%; float:left; }
margin:5px;
}
NB: I tried the following too:
1. removed the line background: #ffffff;
2. background: transparent
but none of the above worked until I set it as
background: none;
I got screwed up completely and had no idea that a background color can make life miserable!
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.
As others have stated adding a padding-top to body works great.
But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.
This solved these kinds of issues for me
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)
a much more handy solution for your reference, it works perfect in all of my projects:
change your first line from
.navbar.navbar-fixed-top
to
.navbar.navbar-default.navbar-static-top
Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!
The solution for Bootstrap 4, it works perfect in all of my projects:
change your first line from
navbar-fixed-top
to
sticky-top
Bootstrap documentation reference
About time they did this right :D
#Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
This issue is known and there's a workaround in the twitter bootstrap site:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of padding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
This worked for me:
body { padding-top: 40px; }
I put this before the yield container:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.
EDIT - this works much better:
#media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
As I've posted in a similar question, I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.
The real solution for me is not to use navbar-fixed-top, but navbar-static-top.
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the body padding in the first place? I have been searching for a solution to this problem, and here is what I came up with:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.
I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?
EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
For handling wrapping lines in menu-bar, apply an id to the navbar, like this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
and add this small script in the head after including the jquery, like this:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
That way, the top-padding of the body gets automatically adjusted.
use this class inside nav tag
class="navbar navbar-expand-lg navbar-light bg-light sticky-top"
For bootstrap 4
for Bootstrap 3.+ , I'd use following CSS to fix navbar-fixed-top and the anchor jump overlapped issue based on
https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
All you have to do is
#media (min-width: 980px) { body { padding-top: 40px; } }
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
I replaced the require in the "bootstrap_and_overrides.css" to:
=require twitter-bootstrap-static/bootstrap.css.erb
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
#import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
#import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
If the require statement is before the body CSS, it will not take effect.
I would do this:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
This works and looks good for me.
<body class="pt-5 mt-4">....</body>
I just wrapped the navbar in a
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
No fancy hocus pocus but it worked..