On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
Related
When the screen width < 768px, I can't figure out why my navbar doesn't scroll although I have set it to .navbar-static-top, it still looks like .navbar-fixed-top.
See my Plunker, the code is in file dashborad.html line 21
<nav class="nav navbar navbar-static-top navbar-inverse col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 ">
http://plnkr.co/edit/Vlx47gPERIJ8ELGEOWZm?p=preview
And there is mycss.css and main.css file, I don't know which part of my script cause that probelm.
I'm quite sure it has something to do with that dashboard-page class, the navbar is trapped inside that div which is always 100% of the screen, so it gives the illusion that the navbar is always fixed on top.
What's the purpose of this class? Is it really necessary?
Remove both .dashboard-page .main in line 6997 in main.css and .dashboard-page class, plan your page differently, the main element doesn't have to be positioned absolute, unless it's a popup or some kind of a div on top of everything. Remove these classes, re-structure your html and you'll be good to go!
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
as you can see, vote button and some text got out of div. how to fix it? and how to set a value of width, when column become "adapted"?
code is:
div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
Seems like extra padding is given to the inner element of span2 which is causing such problem, remove that padding and everything is gonna work fine hopefully!
Another possible solution would be fixing left bar as you want it for always
try
position: fixed;
I am sure one of the solution will work for you!
Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x