I added this plugin to this website. The issue that i am having that i cant have the navigation stay fixed on the website for some reason, you can see the little navigation when you scroll down but it does not stay fixed like in the plug in.
does anyone have a way i could resolve this, thank you very much!
Here is the class
#dot-nav{
right: 10px;
top: 50%;
margin-top: -50px;
height: 100px;
z-index: 999;
}
Your nav is positioned fixed to the most nearest relative position item, that is the div with class page-wrapper is 3673 pixels height so the position top:50% is actually doing it well to the middle of that div.
The easiest solution for your problem is to take the whole #dot-nav item outside the page-wrapper and it will work well. Put it after the page-wrapper.
Related
I want to use an external header and two external panels, one at the left, one at the right. The catch: The panels should be always visible on big screens.
I had some problems positioning the panels with an external header (internal works fine), which I could solve for the left panel when using
position: absolute;
left: 0;
top: 4em;
However, this does not work with the right panel, using
position: absolute;
right: 0;
top: 4em;
just places it above the left panel.
You can see this on this jsFiddle: https://jsfiddle.net/9eb4mekr/
When I use position: relative; float: right; instead, the right panel will be on the right but below every other panel (try it in the jsFiddle).
Any Idea on proper positioning of external panels when always visible (big screens)? Plus an external header?
I found the problem. Well, not really the problem, but at least the solution, thanks to Tasos Anastasiou: Setting the header position to fixed, e.g. with data-position="fixed" in the header div will make relative positioning work again on both panels :)
Here is an updated, working jsFiddle: https://jsfiddle.net/vhkmok8o/
I'm wanting to fix a right hand col to the top of the window (when scrolling) using Bootstrap 3.0 and affix.
This is the html for the element:
<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">
This is the css:
.right-hand-bar.affix {
width: 390px;
position: fixed;
top: 0px;
right: 0px;
margin-top: 110px;
}
In the example here you will see that a few strange things are happening.
The fixed .right-hand-bar (popular blog posts etc) jumps to the right of the screen (due to position fixed being applied). I don't really want to mess about with the right positioning as the site is responsive.
The fixed bar jumps outside of the main container.
I've had to add a width to the fixed element which I'd rather not (due to it being responsive).
I'd also like it to stop scrolling with the page when the bottom of the fixed element hits the top of the footer (or an offset value from the footer).
Can anyone help with any of these.
Thanks in advance!
Wrap a media query for .right-hand-bar.affix styles, so they only apply to the desktop version. You don't want it to be fixed on small-screens anyway.
Then add position: relative; to the styles for .row, and the .right-hand-bar will be affixed relative to that container instead of to the entire page.
I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea comes from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?
PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)
Remy Sharp has a very nice tutorial (with video) on how to do exactly this:
http://jqueryfordesigners.com/fixed-floating-elements/
Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.
Add this tto your stylesheet instead of the class you have now for #leftcol
#leftcol {
position: fixed;
top: 50%;
margin-left: 20px;
margin-top: -150px;
text-align: center;
}
Then add the following to your #container class:
position: relative;
Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.
I have this template and it works fine, but I need to fix that floating menu to the left side of page (not to the left side of browser window). I need to have it stitched when I change resolution or reduce browser window.
I have one idea with two columns with float: left, but there must be a better solution.
Thank you.
You could do the following:
#content {
width: 960px;
margin: 0 230px; //change from auto to a set margin
}
#floatMenu {
position: absolute;
top: 150px;
left: 0%;
margin-left: 200px; //REMOVE this margin altogether
width: 200px;
}
The simplest solution is to move the #floatmenu div inside the #content div. Also you need to manually change the margin-left in the floatingmenu css file to -220px etc. And in addition you would need to change the position attribute on #content div to relative, to make sure the absolutely positioned menu is positioned relative to the #content div's left side.
All in all, drop the floating menu, using JS to add annoying widgets to your website is so 90s. And, well, annoying.
I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..
How to apply this either by CSS or javascript or jquery.
Thanks in advance,
Guru
The simplest way to achieve that effect is position: fixed
<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>
From quirksmode.org:
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
only downside: Doesn't work with IE6.
.someclass {
position: fixed;
top: 33px;
right: 55px;
}
JQuery:
You may find this useful for that.
CSS:
You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:
<style>
#some_id
{
position:fixed;
top:100px;
left:100px;
}
</style>
Now you assign that style id to the element you want to make fixed:
<div id="some_id">So, I'm FIXED :)</div>
.
Resources:
More info about CSS fixed property.
Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..
ex:
<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>
value 1000 is given to override any z-index properties of any other elements