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/
Related
i have a sticky menu that remains on the top of the screen when scrolled down to 100px, however on a page that i have a googlemap the sticky menu gets weird and stays on a input search form.. i have tried disabling js file that is integrated with the map however it didn't help, on other pages without the map the sticky menu works fine and with firefox even on the page where i have the map the sticky menu works fine too.. right now im on the verge of losing my mind what is wrong with chrome..
here's the page i'm having problem with
http://www.chemtools.com.au/find/
you'll have to scroll down and scroll back to the top to get the issue, on firefox it the issue doesn't shows up so my suspect is chrome itself..
any advise where i should look into or what could be causing the issue?
here is the js the is running the sticky menu`function sticky_menu() {
jQuery('.header').affix({
offset: { top: jQuery('.sticky_menu').offset().top}
});
jQuery('.header-middle').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
jQuery('#logo').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
I think you are over complicating your problem by using jQuery. You can easily stick it to the top of the screen using CSS.
If you wrap your header, logo, and and .header-middle objects in a div such as
<div id='wrapper'>
<!-- Your floating header goes here -->
</div>
Then set the wrapper's style/CSS to have position: fixed; ex:
#wrapper{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
CSS's position: fixed attribute forced the object's location to be fixed to a set location on the screen, which will follow with the screen as the user scrolls.
i sorted it out,, it is cause by -webkit-transform: translateZ(0px);
i just set -webkit-transform: none; to only be applied on chrome and safari browser and the sticking issue with the map is gone..
thanks for the time #Aeolingamenfel looking into the problem,, i really appreciate it
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.
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.