Search the Community

Hello, I'm pretty new to CSS (still basic in HTML too, learned it 20 years ago and didn't use it much) and I'm trying to figure out if I can make my responsive sidebar sticky at top position when scrolled down (while the responsive action moves the sidebar to the top). Best example would be : https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp I used this how to. It's exactly the same CSS, no modification except for colors. If you resize the screen, the sidebar moves to the top which is what I want. But it doesn't "stick" there (on mobile and PC). I tried multiple ways of adding a sticky class with Javascript (window.onscroll which works really well for a Header div or top navbar div) or without Javascript. It seems that I can't do it. I must really be missing something. As an additional thing, I would like to have a sticky header (top container) added to that. So I get a full frame (yeah I used to work with frames back in the time) at the top containing a logo on the left and some text on the right (would probably be ugly on mobile though, unless I can make it responsive to reduce the logo size and text format / hide text). The top container should not be over/under the sidebar when the sidebar moves to the top. The sidebar should be below the top container and be sticky. The top container on smaller screen does not have to be sticky. That would be amazing but it's not a top priority for now. Thanks to anyone that can help!

Hello all, I will preface by saying I know only what code I find online (mainly this site) to tweak my company's pages. I am currently working on a landing page via Instapage and have a sticky header and also a pop up form. The form is being truncated by the header and would be ever so gracious if someone could help me with the code to make the form show up on top of the header as well.

Hello all, I am relatively new to HTML and am having a problem that I don't know the best way to solve. Please can anyone help. I am creating an HTML5 web page with a sticky header that contains copyright information that needs to always remain visible at the top of the page. I successfully created the header using the fixed position attribute. The header is a constant size, the full screen width, and remains visible throughout. When the page is scrolled the text scrolls up under the header. That, in itself, is not a problem. What is a problem, however, is when there is a link using the <a href="yyyyy.html#xxxxx"> tag. The display jumps to the link, but the link text is now displayed at the very top of the screen, under, and consequently hidden by, the fixed header. Is there a way to either: 1) Make the bulk of the web page only use the space below the header, or 2) Make the jump to the link display not at the top of the screen, but lower by the height of the header. My only other consideration is that I would like to do this in a manner that has the most backward compatibility. The web pages I am creating might need to be displayed world wide on older systems. So, even though I am currently testing HTML5 I am actually trying not to take advantage of new HTML5 features. Many thanks in anticipation, Roy

Hello, I'm trying to have a separate image with a link on the sticky header different from the linked image from the static header. I currently have the same image on both, but would like to use different images. You can view here: http://www.sjmradio.oiw9.com/contact-us.htm The code is that I'm using is pretty straight forward for the image - CSS: #logo { padding: 45px 0 30px 0; } #logo a { display: inline-block; max-width: 100%; /* 1 */ } #logo img { display: block; } HTML: <div id="logo"> <a href="/index.htm"><img src="/images/sjm-logo.png"></a> </div> Any and all thoughts would be greatly appreciated! Thanks in advance, mh