{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 永恒的永恒 的问题《twitter bootstrap navbar fixed top overlapping sit》','https://www.manongdao.com/q-8357.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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.
The spacing works out great on all screen sizes.
This issue is known and there's a workaround in the twitter bootstrap site:
This worked for me:
Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:
(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)
... you need to put the body CSS before the require statement as follows:
If the require statement is before the body CSS, it will not take effect.
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
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)
The solution for Bootstrap 4, it works perfect in all of my projects:
change your first line from
to
Bootstrap documentation reference
About time they did this right :D
All you have to do is