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!

Hi, Please help me with side nav bar, I have fixed the navigation bar but if I scroll down the page nav bar is coming above the footer. I need it in specific area. Please help me for this Thanks Nesar

i cant make background color fully the entire page with fixed sidebar, can you help me to give the background color fully in main side bar. sorry for my bad english :) This the link fixed sidebar

Can you please add an example with a side bar that may be resized by the user? For example like the one you have in the Tryit Editor.

Hello. I'm upgrading an old site - & created a new subdomain & copying all the code slowly - upgrading to W3CSS & validating the code.. Anyway, On the left menu, There is a side-menu. I can click on it & it disapears / re-appears. It was working up until a few days ago. But i continued upgrading it today & noticed that it no longer opens/closes. Ive double-checked & the javascript names are there - it looks OK. ive checked the full HTML & can see no duplicate ID's (2 ID's using the same name etc..) so everything looks OK. However it does not work. can anyone assist me in finding out what is wrong ? PS Ive sone a validation check on a few pages & they do validate. This is a simple page (less HTML code) - http://foe-new.kwister.com/acronym Thank you EDIT: I was not editing / upgrading the side-bar today - I was transferring other files. I do not know why the sidebar does not open/close.

Noob questions here, why does the w3-sidebar scroll as the page scrolls, I know the css itself has a "fixed" position but when I alter this I lose the 100% on the height and the rest of the content displays below the level of the sidebar. Is there anyway I can cause the sidebar to remain staticly positioned I don't want it scrolling with the page. Or do I have to resort to changing the css myself to make this work?

Hello everyone, I am a new member. I have a personal blog. Last night, My blog was a confusing error. After I edit my article,my Sidebar suddenly pushed down the index page. I do not understand why ? I did not edit the html of your blog. I was sit one night to try editing, but still failed. I need help now. Please help me. - This is my blog : http://newstrafficmonsoon.blogspot.com/ - This is screenshot Sorry because I'm not good at english Thank you. God bless all

Hello, I have created accordion left menu where first level is clickable and appearing a slide down tree menu. The accordion menu is rolling to the left where is appearing just icons. I want in this position to not display a tree menu after click on an icon but to unroll whole menu to default position.Files are in attachement. Can you help me with this please? Thank you. accordion-menu.zip

It is a three column theme. I want to make the space between the sidebar and the main content area narrower. And also widen both sidebars outwards. The site is: http://lifelessonshome.com/

So, I'm trying to make this website for a friend and the sidebar is not cooperating! It is having a bit of issues it keeps on going underneath all of the content instead of going to the right side like it is supposed to do! I'm going to insert some code and tell me if you see something that will make the sidebar go off to the bottom instead of going to the side! Sorry the code snippet is not working <html> <head> <title>About Us | NueroEdge</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--> <script src="js/jquery.min.js"></script> <script src="js/jquery.dropotron.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> </noscript> <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> </head> <body> <!-- Header Wrapper --> <div class="wrapper style1"> <!-- Header --> <div id="header"> <div class="container"> <!-- Logo --> <h1><a href="#" id="logo">Solarize</a></h1> <!-- Nav --> <nav id="nav"> <ul> <li class="active"><a href="index.html">Home</a></li> <li> <a href="">Dropdown</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Magna phasellus</a></li> <li><a href="#">Etiam dolore nisl</a></li> <li> <a href="">Phasellus consequat</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Phasellus consequat</a></li> <li><a href="#">Magna phasellus</a></li> <li><a href="#">Etiam dolore nisl</a></li> <li><a href="#">Veroeros feugiat</a></li> </ul> </li> <li><a href="#">Veroeros feugiat</a></li> </ul> </li> <li><a href="left-sidebar.html">Left Sidebar</a></li> <li><a href="right-sidebar.html">Right Sidebar</a></li> <li><a href="no-sidebar.html">No Sidebar</a></li> </ul> </nav> </div> </div> </div> <!-- Main --> <div id="main" class="wrapper style4"> <div class="container"> <div class="row"> <!-- Content --> <div id="content" class="8u skel-cell-important"> <section> <header class="major"> <h2>WE ARE NUEROEDGE</h2> <span class="byline">POWERED BY ANAZRO</span> </header> <div class="wsite-spacer" style="height:53px;"></div> <img src="imagesNueroEdgeLogo.png"align="left" height="150" width="160" ><div class="paragraph" style="display:block;"><font size="3"><strong>H</strong>ello, and welcome to our team Nueroedge! The world's upcoming top organizational Team. #NueroEdge. It was first founded January of 2015. Yes, We are fairly new but we also have a vision for one of the bigger computational team! If you have any question about you security visit our <a href="/privacy-policy.html" title="">privacy policy</a> and/or our <a href="/contactus.html" title="">contact us</a>! We know that we are a fairly new company and we want to respect your privacy and be the next big thing!</font></div> <hr style="width:100%;clear:both;visibility:hidden;"> <aside><a class="twitter-timeline" href="https://twitter.com/NueroEdge" data-widget-id="574673632108134400">Tweets by @NueroEdge</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></aside></p> </div> </section> </div> <!-- Sidebar --> <aside> <div id="sidebar" class="4u"> <section> <header class="major"> <h2>Etiam malesuada</h2> </header> <ul class="default"> <li><a href="#">Pellentesque lectus gravida blandit</a></li> <li><a href="#">Lorem ipsum consectetuer adipiscing</a></li> <li><a href="#">Phasellus nibh pellentesque congue</a></li> <li><a href="#">Cras vitae metus aliquam pharetra</a></li> <li><a href="#">Maecenas vitae orci feugiat eleifend</a></li> <li><a href="#">Phasellus nibh pellentesque congue</a></li> <li><a href="#">Cras vitae metus aliquam pharetra</a></li> </ul> </section> <section> <header class="major"> <h2>Mauris vulputate</h2> </header> <ul class="default"> <li><a href="#">Pellentesque lectus gravida blandit</a></li> <li><a href="#">Lorem ipsum consectetuer adipiscing</a></li> <li><a href="#">Phasellus nibh pellentesque congue</a></li> <li><a href="#">Cras vitae metus aliquam pharetra</a></li> <li><a href="#">Maecenas vitae orci feugiat eleifend</a></li> <li><a href="#">Phasellus nibh pellentesque congue</a></li> <li><a href="#">Cras vitae metus aliquam pharetra</a></li> </ul> </section> </div> </div> </div> </div> </aside> <!-- Team --> <div class="wrapper style5"> <section id="team" class="container"> <header class="major"> <h2>Key Members/Co-Founder</h2> <span class="byline">These are the people who make it Happen! Click the Picture for twitter</span> </header> <div class="row"> <div class="3u"> <a href="#" class="image"><img src="images/ryantarson.png" alt="" style="width:162px;height:162px"></a> <h3>Ryan Tarson</h3> <p>Ryan is a Contributor, Website Developer, Social Media Admin, Account Managers, Hosting, Financial Advisor, PC Gamer/PC streamer</p> </div> <div class="3u"> <a href="#" class="image"><img src="images/kavini.png" alt="" style="width:162px;height:162px"></a> <h3>Kavin I.</h3> <p>Kavin is a Contributor, GFX Artist, Streamer, Competitive Gamer, Social Media Moderator, Account Manager</p> </div> <div class="3u"> <a href="#" class="image"><img src="images/placeholder.png" alt="" style="width:162px;height:162px"></a> <h3>Help Wanted</h3> <p>Another Develper Needed</p> </div> <div class="3u"> <a href="#" class="image"><img src="images/placeholder.png" alt="" style="width:162px;height:162px"></a> <h3>Help Wanted</h3> <p>Streamer/Competitive Player. Trust worthy</p> </div> </div> </section> </div> <!-- Footer --> <div id="footer"> <section class="container"> <header class="major"> <h2>Connect with us</h2> <span class="byline">Want to stay up to date? Follow our Social Media Networks.</span> </header> <ul class="icons"> <li class="active"><a href="https://www.facebook.com/pages/NueroEdge/1560679180842070" class="fa fa-facebook"><span>Facebook</span></a></li> <li><a href="https://twitter.com/NueroEdge" class="fa fa-twitter"><span>Twitter</span></a></li> <li><a href="#" class="fa fa-youtube-play"><span>YouTube</span></a></li> <li><a href="https://plus.google.com/111096761474269802283/about" class="fa fa-google-plus"><span>Google+</span></a></li> <li><a href="#" class="fa fa-envelope"><span>Mail></a></li> </ul> <hr /> </section> <!-- Copyright --> <div id="copyright"> ©2014 <a href="http://nueroedge.com">NueroEdge</a> All Rights Reserved | <a href="http://nueroedge.com">Contact Us |</a> <a href="http://nueroedge.com/cc0">Team Members </a> </div> </div> </body> </html> Please help me out, Thanks!

For my WordPress site, beta.cleantelligent.com , I have a blog which has a custom sidebar. (sidebar-blog.php)When you click on a single post (single.php), the sidebar goes away, even though it is correctly coded into the php.http://pastebin.com/sRE1GV1W - Single.phphttp://pastebin.com/Q6ej6qM5 - sidebar-blog.phpIs there any idea why this isn't showing up? I'm not super proficient when it comes to editing functions.php, so if it involves that, please explain it in simple terms and specifically.Thank you!

Hi. I've worked with HTML a bit in the past but I'm a bit rusty. Actually, I'm very rusty as it's been some time. When the Home page for my online shop loads, the sidebar navigation links are all open - both the Parent links and all the sub-links as well-and I want just the Parent links to appear as closed, and then have all the associated sub links open when the Parent link is clicked. Subsequently, all the subsection links would open and close when clicked, either individually or when the Parent link is reclicked to close the entire section. As it is now, there about 50 links open when the Home Page loads and the sidebar looks very messy and cluttered, and downright confusing and intimidating. What code would I use to get the Parent Links to be visible first (and closed) when the Home Page loads, and then have all the other links open and close as needed? Thanks.

Hey guys, I am attempting to update a wordpress theme to make my content area take up more of the screen real estate. RIght now it has such a small area in the middle.I would like to see a 10% margin on either side of the content and navigation bars. with the side bar appropriately placed next to the content as you would expect it to be.I am making my adjustment in a secondary stylesheet that would replace values in the original on wordpress, but I am having a hard time getting the pieces where they need to be. One adjustment screws up the navigation bar, while another moves the sidebar either to the far right of the screen with a big gap between the content and sidebar, or it moves below the content completely.This is the original. I'm pretty sure that this is the only code that has anything to do with what I am trying to accomplish. /* 2.1 Containers & Columns */#wrapper { background: url(images/bg.png) repeat; border-top: 4px solid #325164; border-bottom: 1px solid #A5575B; }#main, .home.page #main {width:620px; padding: 3em 0 3em;} /* Fix for static homepages */.home #main { padding: 30px 0 2em 0; width: auto; }#main.fullwidth, .layout-full #main, .col-full {width: 960px; margin:0 auto;}#sidebar{ width:290px; overflow: visible !important; }#sidebar .primary { padding: 3em 15px; } #sidebar .secondary { width:140px; } .col-left { float: left; }.col-right { float: right; }.layout-right-content #main { float:right; }.layout-right-content #sidebar { float:left; } Here is the bits I have been playing with. I have tried adjusting margins, padding, ect. #main, .home.page #main {width:80%; margin: 0 10% 0 10%;} .home #main { padding: 30px 0 2em 0; width: auto; }/*#main.fullwidth, .layout-full #main, .col-full {padding: 3px 10% 3px 10%; width: auto; margin:0 auto;}#sidebar{ width:auto; margin-right:20px; overflow: visible !important; }*/ I would like the sidebar to also be 10% from the edge, but next to the content area.I currently have the sidebar set to auto, but if I can get it to be lined up under the search bar and the 290 px that it was origionally, that would be fine, but on smaller screens, I'd like to see that width decrease in relation to the main content.Can you all help me figure out what I am doing wrong? Thanks.

Hi all, As the title tells you already my website isn't shown properly in IE (any version). On my mac everything is fine. But as you can see on the screenshot my sidebar is too narrow in IE. I want it to be as long as the footer. I would be happy if someone could tell me what I put wrongly or didn't put at all in my CSS.. Thanks! PS: I made it in WORDPRESS, theme=Twenty Eleven, sidebar="#secondary" http://f.cl.ly/items/2N432K3b123J190i1p03/Naamloos.jpg My child-CSS: #page {margin-top:0px; font-family:Helvetica Neue; background: none repeat scroll 0 0 rgba(0, 0, 0, 0); margin-bottom:0;}body {font-family:Times; font-size:14px;}#content {width:500px; height:388px; opacity:1 !important; padding-left:30px;}#primary {height:579px; background:white !important;}#access a {color:#eeec73; font-size:15px; font-family:Helvetica Neue; width:67px; text-align:center; line-height: 7.333em; height:110px;}#secondary {margin-top:-6px; margin-right:-4px; border-left:none; max-height:400px; add_width:300px;}#branding {border-top:none;}#branding img {float:right;}#supplementary {border-top:0;padding: 1.325em 0%;}#site-generator {text-align:left; border-top:0px; background: rgba(255, 255, 255, 0.1); width:984px;}#site-generator a {margin-left:10px; color:white;}/* Two Footer Widget Areas */#supplementary.two .widget-area {float: left;margin-right: 3.7%;width: 48.1%;}#primary {margin: 0 -26.4% 0 0;width: 61.9%;}#content {margin: 0 34% 0 0%;width: 90%;}#secondary {margin-right: 0%;width: 38.8%;}#secondary img {border:none; width:100%; height:579px;}#access div {margin-left: 10px;}#access img {width:379px; height:95px; background:transparent; margin-top:8px; color:white;}#access { background: transparent; clear: both; display: inline; float: left; margin:0; width: 1000px; height:110px; border-top:0; }#access li:hover > a,#access a:focus {background: rgba(255, 255, 255, 0.1); color:white; font-weight:500;}#access li:hover > a { background: rgba(255, 255, 255, 0.1); color:white; font-weight:300;}#access .current-menu-item > a,#access .current-menu-ancestor > a,#access .current_page_item > a,#access .current_page_ancestor > a { background-color: rgba(255, 255, 255, 0.1); color:white; font-weight:300;}.entry-title { display: none;}.hentry, .no-results {border-bottom: 0px solid #DDDDDD;}

Hi, I have a wordpress blog, http://bupphawitt.com/, that I want to create extra sidebars outside the container, and on both sides of it. The sidebars have to be fixed, so that when I scroll down the page the sidebars remain fixed. Please see yahoo page for similar idea I want to create, http://www.yahoo.com/. Have a look at its left sidebar, which is how I want my site to be, just the extra boxes on both sides. I have tried to create a wrapper outside it, but unsuccessful. I must have done something wrong. Can someone please guide me to the right direction? Any help would be highly appreciated. Please find a drawing attached, so you can better see how it should look. Beforehand Thanks! My website is: http://bupphawitt.com/ Regards, Buppha Witt

Hi!I have a problem with a child theme I made. The sidebar is stuck to the bottom of the wrapper. What might cause the problem?The site:http://www.kappfjell.seGreatful for help!Thanks!

Hello, I am looking to customize by right sidebar for my WordPress website, and am wondering if there is a fairly easy way to do so with php code. I don't know all that much about code, but I have customized other codes on my site with good results. I am aware there is a custom sidebars plugin, but I'm trying to not depend upon plugins too much. And, I'm not sure if it has a way for me to do what I am looking to do or not either. There are certain pieces of my right sidebar that I am looking to have displayed on all of the pages of my site. This happens automatically by default. However, I am also looking for other pieces of my right sidebar to appear only on specific pages. Basically, I'm looking to have things that appear on every page and things that appear only on certain pages there simultaneously. In my sidebar page in the editor, I currently have the following code. It was there originally. It's just one part of the overall code that is there. Is there something I can put after this code to indicate I want "a" on only page "a" and "b" on only page "b" and "c" on every page, etc?Is there maybe a way to exclude something from appearing on certain pages by using page ID#'s or something? Then, if there were no excluded pages, whatever code I have would appear on every page? <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_Right') ) : else : ?> Does anyone know how this can be accomplished? And how I could tell the code to place things where I want them placed on the sidebar? Thanks in advance for your help!

Hi all, I am a new website designer, and I have designed a website for my YT channel, with the help of DreamWeaver's inbuilt templates and CSS. I have been having problem recently, as one of the sidebars is not rendering inside the .container div, rather it is rendering outside it, yet it is still fixed. The contained element is a twitter bar, and I was wondering if anyone knew what could be causing it. You can see the problem here http://www.battlefie...ys.freeglo.net/The sidebar on the left should be right next to the black matte background like the sidebar on the right. Apologies if you try to read the code, I haven't taken out DW's notes yet as I still use them. This is the .container code .container {width: 1068px;max-width: 1260px;min-width: 780px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto; There is the sidebar's code that I am having problems with .sidebar2 {float: right;width: 171px;padding-top: 10px;padding-right: 0;padding-bottom: 10px;padding-left: 0;position:fixed; And here is what is in the sidebar - just a twitter feed and a facebook like button <div class="sidebar2"><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#appId=267242146629402&xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-href="http://www.battlefieldboys.freeglo.net/" data-send="true" data-layout="button_count" data-width="90" data-show-faces="false" data-font="arial"></div> <script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 30000, width: 170, height: 300, theme: { shell: { background: '#000000', color: '#e6bc12' }, tweets: { background: '#000000', color: '#ffffff', links: '#e6bc12' } }, features: { scrollbar: true, loop: false, live: true, hashtags: true, timestamp: true, avatars: false, behavior: 'all' }}).render().setUser('BattlefieldBoys').start();</script></div> Any and all help will be greatly appreciated.- deviouswatch