Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS how to collapse sidebar without main content moving to fill space left by collapsed sidebar

mdavid

Coder
Hi I've used this code (here is the jsfiddle) to create a collapsable sidebar it's working ok, except that the main content moves left to fill the space of the collapsed sidebar.
Here's a couple of screen shots to illustrate:
With scrollbar:
with-scollbar.JPG

Without scrollbar:
without-scollbar.JPG

Can someone please give me an idea what I need to change to stop the main content moving left.
This is the javascript I have to collapse the sidebar onclick, I think I need to add some code here
(+ some css for the image) to stop the image moving left.
JavaScript:
$(document).ready(function() {
  $('.example').magnify();
  $("#sidebar-toggle").on("click", function () {
    $("#wrapper").toggleClass("no-sidebar");
});
});
Any help much appreciated
 
Solution
After Googling, and playing around with the css arrived at this solution

Code:
.no-sidebar a#sidebar-toggle {
    position: fixed;
     top: 20vh;
     left: 2vw;
 }

Thanks Johna and mdavid for your help
So I'm guessing it's solved?
I'm not sure if you've changed your CSS, but for the CSS in the JSFiddle change this:
CSS:
.no-sidebar #content {
    width: 100%;
}
to this:
CSS:
.no-sidebar #content {
    margin-left: 299px;
}
 
Hi Johna, Your solution keeps the content from moving left but also stops the collapse/show sidebar icon from moving left.
I would like the icon to move left as before (to the area of the collapsed sidebar), any way to do this?
Thanks for any help
 
After Googling, and playing around with the css arrived at this solution

Code:
.no-sidebar a#sidebar-toggle {
    position: fixed;
     top: 20vh;
     left: 2vw;
 }

Thanks Johna and mdavid for your help
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom