ive put in the standard mmenu but when i open the menu my page always goes to the top of the page, is there anyway to stop that when the menu is closed again you go back to the same place on the page.
any ideas
Thanks
I had this same issue, but was able to fix it by simply removing
height:100%;
on my body and html css wrapper.
I changed my css from this:
html, body {
height: 100%
width: 100%;
margin: 0px;
padding: 0px;
}
to this:
html, body {
margin: 0px;
padding: 0px;
}
and it solved the issue for me.
Related
I have tried almost every answer in similar thread, but could find anything that works for me.
I have following site:
A header (div span over the full width).
A left column.
A right column.
The header and the right column are fixed.
I would like the text in the left column to disappear beneath the header when scrolling.
Something like I see on many websites where a header with a message (ex. "accept cookies") stays on a fixed place.
Any ideas?
HTML:
<div id="head">
<!-- here is the code of our header -->
</div>
<div id="content">
<!-- The next block for example with the main content -->
</div>
CSS:
#head{
width: 1000px;
height: 60px;
position: fixed;
background: #fff;
z-index: 1000;
}
/* So that our next block does not run under the header, as soon as the page is loaded, add an indent. */
#content {
margin-top: 60px;
}
Everything works now.
Left column scrolling with fixed header:
.header {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
Right column fixed (responsive):
#media (min-width: 1200px) {
.rightcolumn {position: fixed;}
}
I have a problem with my parallax scrolling website. I need to create a fixed header at the top of the site, but it wont remain "fixed".
Link to full code here:
http://jsfiddle.net/ressy0101/sx4ukc1c/5/
#header{
position: fixed;
background-color: black;
height: 50px;
width: 100%;
z-index: 9999;
color:white;
text-align:center;
font-size:40px;
}
This is working for me, hope it will resolve your issue.
change position:sticky;
& add
top:0px;
i.e
#header{
top:0px;
position:sticky;
}
I'm working on a Tictail shop and i have one problem that i just can't get my head around. As you can see here http://i.stack.imgur.com/rXOJf.png, the picture (which is supposed to be on the front page) falls under the menu. I don't know what to do. My first thought was to check the "header", but i couldn't solve it.
/* HEADER
**********************************/
#mast {
position: fixed;<br>
border-top: 1px solid #fff;<br>
background: #fff;<br>
left: 0;<br>
height: 100%;<br>
width: 280px;<br>
z-index: 300;<br>
text-align: center;<br>
padding: 50px 0 0 0;<br>
overflow: auto;<br>
overflow-x: hidden; }
Is it something else i should look for? I also checked the "main-container", but no luck.
#main_container {<br>
margin: 0 auto;<br>
padding: 80px 0 0 0; }
Would be deeply greatful if someone could help me out!
I've made it work on my screen using div-tags, but when i test the resolution for smaller screens the picture(s) still disappears under the navigation.
I don't get it. Shouldn't i be able to make the navigation like a 'wall' that the content in the main container can't 'breach'?
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.