I saw similar posts in this forum but there were no replies.
I have a grey colored band (a DIV) on which I have links for site navigation. At present, it is displayed at the end of the page, when you just scroll down to the end. I want it to remain visible like the Windows status bar and at the same position like the status bar.
Even if the user scrolls the site, this band must remain at that position.
The CSS style position: fixed; is what you're looking for. Additionally set bottom: 0px; and width, height and left to whatever values you want.
position: fixed in the CSS will do it, although this isn't supported in IE 6 if that's important to you. If it is, have a look at http://ryanfait.com/sticky-footer/ for something similar cross-browser or use a script like IE7.js to add fixed positioning to IE 6.
Related
I am building a website using Divi, and for a couple of the pages there is a requirement to have a sticky menu, along with a top title section combined as though they were one. Ideally I would like them to remain in their current position and simply scroll with the page without knocking out the formatting.
Code used so far is as follows:
.stickyheader{
position: sticky;
position: -webkit-sticky;
top: 55px;
}
#page-container{
overflow: visible !important;
}
I have tried naming both the title section and menu section with the class name 'stickyheader' in the hope that both would be lumped together. This does appear to make both elements scroll with the page, but the formatting goes out the window and they start overlapping and squashing up at the top of the screen, plus the space at the top of the title section has increased which throws the formatting out for the whole page, as everything has been adjusted to fit over the background image.
Both sections are global, for ease across all other pages as these two elements appear the same on each one.
Does anybody have any suggestions? Is there an easier way to do this?
Thanks in advance!
Sure thing, you can do that easily, making sure that you are using the latest Divi version which has the Theme Builder. With it, you can design a template which can govern a specific page and you can assign a fixed position to any element:
No need to use CSS. You can also take other approach:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-position-options
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
https://www.divithemeexamples.com/make-your-divi-4-0-header-sticky-or-fixed-with-the-theme-builder/
I have a question regarding my website.
I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?
I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?
Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.
ORIGINAL
The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.
HTML:
<div class="trials-fixed">Clinical trials</div>
CSS:
.trials-fixed{
position: fixed;
top: 0;
right: 0;
width: 300px;
}
The position property is explained more here.
You may have to set the z-index of the text; explained here.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
I've been trying to compose this facebook-like top bar (or header, I don't know) with some CSS. I think it is pretty easy, and well, the first results indeed were.
I've set the bar with a fixed position, with its top and left properties set to 0. Its padding is set to 4px and it works great; Just as I wanted it.
But the question now is... what about the content? I could simply wrap it inside a <div> and relatively position it a few ems to its bottom. But then, wouldn't it hide the content's bottom in case of it surpassing the browser's max height? And also, that could cause some size incompatibilities with certain browsers (I hate IE).
I'm sorry if this has already been asked here, I could not find such question. And to be more clear, I do not want any kinda "dinamically-updating" headers -- at least not yet. And I think I can do that with some HTML5.
The main question here is: what is the best way of doing such header? Is the position: fixed the real way to go? And, if so, how is the best way of displaying the content?
TIA, André
position:fixed will do.
Simple add margin to the top of your content. (same as the height of your header.)
So, when you're at the top of the page, your header will cover the margin. When you scroll down, it will behave as expected. And the browser will not hide the bottom part.
I've seen this page here and I really like the breadcrumbs at the bottom.
How do I achieve this behavior ? The breadcrumbs at the bottom stays at the bottom and nomatter if you're scrolling down, it is still there.
http://developer.apple.com/iphone/library/navigation/index.html?section=Resource+Types&topic=Getting+Started
Please someone help me with some good code. Because I have no clue.
#breadcrumbs {
position: fixed;
bottom: 0px;
width: 100%;
/* Set your desired height
* and other factors like you would
* any other div.
*/
}
position: fixed fixes your element to an edge of the viewer, in this case, to the bottom. If you want to fix the element to the top, you would go top:0px, or left side 30px from the bottom, you'd go left:0px;bottom:30px. I use this a lot for my CMS admin pages (I put nav bars and logout at the top). It's a great tool, but bear in mind that the iPhone does not support native CSS :fixed, nor does older IE.
Did you look into using javascript or a jQuery plugin to make the breadcrumb for you? Then you can use dclowd9901's answer to position it