How to position my sidebar next to my content?

Topic: How to position my sidebar next to my content?

.jodadev. pro asked 6 years ago

Hi,

I'm trying to position my sidebar to always be next to my content (except on breakpoints obviously). Right now, how the code is on this site, the side bar is always on the far left, which is a huge flaw imo and doesn't look good as the screen gets bigger since it'll just be further and further away from the content. I don't want to put my content on a container-fluid since I don't want the whole screen to be full of content; I just want the spaces to be on both far sides INSTEAD in between the side bar and content like it is now.

Example: (Current bad version)

Navbar

Side bar | (space) Content (space)

Example: (What I want)

Navbar

(space) | Side bar | Content | (space)

Any help would be appreciated. Thanks!

PS: Version number 4.4.5

Ollie Vincent pro commented 6 years ago

Hi, You could place the sidebar in the same container as the content in a nested column. Is that what you mean? Could you share a link or post your code here? Thanks

.jodadev. pro commented 6 years ago

Hi, thanks for the response. So I tried doing the nested column and it still doesn't work. Here's the code: 1) HTML and JS <pre>Start your code here</pre> <pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>title</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="../css/bootstrap.min.css" rel="stylesheet">  <link href="../css/mdb.min.css" rel="stylesheet">  <link href="../css/Testing2.css" rel="stylesheet"> </head> <body class="fixed-sn">  <header>  <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg navbar-dark #000000 double-nav" style="background-color: #000000"> <div class="container"> <a class="navbar-brand" href=""><img src="" height="40" class="d-inline-block align-middle" alt=""><strong>nav</strong></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown" style="padding-right: 10px"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">nav</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href=""><span style="font-size:17px">nav</span></a> </div> </li> </ul> </div> </div>  <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div> </nav>  </header>   <main class="mt-5">  <div class="container mt-5">  <div class="row mt-5">  <div class="col-12 col-sm-12 col-md-12 mb-4"> <div class="col-3 col-sm-3">  <div id="slide-out" class="side-nav #37474F fixed" style="margin-top: 66px"> <ul class="custom-scrollbar #37474F list-unstyled">  <li> <br> <h6 style="text-align: center"><strong><font color="white"> sidebar</font></strong></h6> <hr class="hr-light text"> </li>   <li> <ul class="collapsible collapsible-accordion"> <li><a href="" class="collapsible-header arrow-r"><i class="fa fa-chevron-right"></i><strong> sidebar</strong></a></li> </ul> </li>  </ul> <div class="sidenav-bg mask-strong"></div> </div>  </div> <div class="col-9 col-sm-9"> <h2 class="font-bold">content</h2> <p class="lead" style="margin-top: 15px"> Paragraph of content. </p> </div> </div>  </div>  </div>  </main>    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="../js/popper.min.js"></script>  <script type="text/javascript" src="../js/bootstrap.min.js"></script>  <script type="text/javascript" src="../js/mdb.min.js"></script> <script> $('.button-collapse').sideNav({ edge: 'left', // Choose the horizontal origin closeOnClick: true // Closes side-nav on clicks, useful for Angular/Meteor }); </script> </body> </html></pre> 2) CSS <pre>.side-nav { background-color: #4B515D !important; color: #37474F !important; margin-top: 66px; } @media (max-width: 768px) { .side-nav { margin-top: 41px; } } .double-nav { z-index: 1000; }</pre>

Hi, thanks for the response. So I tried doing the nested column and it still doesn't work. Here's the code:
1) HTML and JS

<pre>Start your code here</pre>
<pre><!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>title</title>
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 
 <link href="../css/mdb.min.css" rel="stylesheet">
 
 <link href="../css/Testing2.css" rel="stylesheet">
</head>

<header>

<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg navbar-dark #000000 double-nav" style="background-color: #000000">
 <div class="container">

<div class="float-left">
 <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
 </div>

</nav>
 
</header>

<main class="mt-5">

<div class="container mt-5">

<div class="row mt-5">

<div class="col-12 col-sm-12 col-md-12 mb-4">

<div class="col-3 col-sm-3">
 
 <div id="slide-out" class="side-nav #37474F fixed" style="margin-top: 66px">
 <ul class="custom-scrollbar #37474F list-unstyled">
 
 <li>
 <br>
 <h6 style="text-align: center"><strong><font color="white"> sidebar</font></strong></h6>
 <hr class="hr-light text">
 </li>
 
 
 <li>
 <ul class="collapsible collapsible-accordion">
 <li><a href="" class="collapsible-header arrow-r"><i class="fa fa-chevron-right"></i><strong> sidebar</strong></a></li>
 </ul>
 </li>
 
 </ul>
 <div class="sidenav-bg mask-strong"></div>
 </div>
 
 </div>

<div class="col-9 col-sm-9">
 <h2 class="font-bold">content</h2>
 <p class="lead" style="margin-top: 15px"> Paragraph of content. </p>
 </div>
 </div>

</div>

</div>

</main>

<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="../js/popper.min.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/mdb.min.js"></script>

</body>

</html></pre>

2) CSS
<pre>.side-nav {
 background-color: #4B515D !important;
 color: #37474F !important;
 margin-top: 66px;
}

@media (max-width: 768px) {
 .side-nav {
 margin-top: 41px;
 }
}

.double-nav {
 z-index: 1000;
}</pre>

Please insert min. 15 characters.

Add comment

Ollie Vincent pro answered 6 years ago

3 1 Best answer

UPDATE

I see your issues - the reason the content was still aligned in the middle was because of the col-md class. I have added separate classes (see code). As for the toggle overlay building up, I can't offer a quick fix for that, that is how mdb built it. For now I have placed it behind the slide out menu so that you cant press it multiple times. Same url: http://olliev.co.uk/sticky-sidenav/test/ Thanks

Add comment

Ollie Vincent pro answered 6 years ago

0 1 Best answer

I shall have a look in the morning and update here :)

goluma free commented 4 years ago

BRUH! HAS IT BEEN DA MORNING YET?

Grzegorz Bujański staff commented 4 years ago

Hi. The reply post has been moved up automatically because it has been marked as best answer. Check out the second post on this topic

Add comment

Ollie Vincent pro answered 6 years ago

0 1 Best answer

I am guessing you are resizing the browser? Yes that might happen if the styles change at different points.

It looks ok on my tablet and phone and the toggle works fine. Resizing the browser window isn't always the best way to test responsiveness.

Please check on a mobile - I will try to replicate your issue.

Thanks

.jodadev. pro commented 6 years ago

I'm using some plug-ins that test responsiveness, that's basically how I do testing. I also did resizing of the browser and in both it showed the issue. But still, thanks for trying and for all the help! I'mma keep trying :)

Add comment

Ollie Vincent pro answered 6 years ago

0 1 Best answer

Please insert min. 20 characters.

No problem - didn't realise it was you who posted it ;)

I have done some major code customisation to try and make it easier to read and use. If the content is too wide you can always add padding to the container, I always find it is easier to add than remove in this case!

I have uploaded it here: http://olliev.co.uk/sticky-sidenav/test/ thinking you can just rip it from the source code (CTRL + U).

All the CSS & JS files should be the have the same paths as yours so it should be a simple copy and paste job :)

The container should be 1800px wide, but when it responds it is back to default (as you wanted I think)?

You can't put the navbar in a container to centre it because it is fixed.

Hope that helps.

Let me know how it goes :)

.jodadev. pro commented 6 years ago

Thank you so much for the update!! So now it works perfectly on sizes over 1441px, but there's errors from sizes below that: 1) From 1401px to 1440px, the sidebar is at the end of the left side and only shows half of it all while the toggle is also there. Any idea what this could be? 2) From 768px to 1400px, the content is in the middle rather than at the end of the left considering that the side bar isn't there anymore. It would be better if once the side bar leaves, the content can go to its original form/content instead of staying in the middle with nothing on the left. Additionally, the width of container of the navbar is different than the width of container of the content, but I think maybe is the same and is just that somehow the space where the side bar was before is still ocupying even though is not there anymore. Any idea how to fix this so once the side bar leaves then both containers can go back to being perfectly aligned again just like you did when screen size was over 1442px? 3) When I click the toggle it opens fine, but then when I click again I can't close it; it just keeps coming back and the background goes dark. Do you know how to make it that when I click it it opens, then closes, then opens, etc? Those are the only three issues. Thank you so much for your help!!

Thank you so much for the update!! So now it works perfectly on sizes over 1441px, but there's errors from sizes below that:
1) From 1401px to 1440px, the sidebar is at the end of the left side and only shows half of it all while the toggle is also there. Any idea what this could be?
2) From 768px to 1400px, the content is in the middle rather than at the end of the left considering that the side bar isn't there anymore. It would be better if once the side bar leaves, the content can go to its original form/content instead of staying in the middle with nothing on the left. Additionally, the width of container of the navbar is different than the width of container of the content, but I think maybe is the same and is just that somehow the space where the side bar was before is still ocupying even though is not there anymore. Any idea how to fix this so once the side bar leaves then both containers can go back to being perfectly aligned again just like you did when screen size was over 1442px?
3) When I click the toggle it opens fine, but then when I click again I can't close it; it just keeps coming back and the background goes dark. Do you know how to make it that when I click it it opens, then closes, then opens, etc?

Those are the only three issues. Thank you so much for your help!!

Please insert min. 15 characters.

Add comment

Ollie Vincent pro answered 6 years ago

2 1 Best answer

<p>Hi,</p>
<p>Sorry,</p>
<p>I misunderstood - I have had a fiddle see what you think :) it only works on screen sizes 1401px or bigger because the breakpoint of the sidenav is 1400px. I had done some styling the head tags, which ofcourse, you can put in your css file.</p>
<pre><!DOCTYPE html>

<head>

<!– Font Awesome –>

<!– Bootstrap core CSS –>

<!– Material Design Bootstrap –>

<!– Your custom styles (optional) –>

.navbar{z-index: 9999!important;}

@media(max-width:1400px){.side-nav{left:0!important; position:fixed!important;}

</style>

.side-nav{position: relative!important; top:0!important;}
.navbar{z-index: 9999!important;}

@media(max-width:1400px){.side-nav{left:0!important; position:fixed!important;}

</style>

</head>

<!–Double navigation–>

<!–Navbar–>

</button>

</div>

</li>

</ul>

</div>

<!– SideNav slide-out button –>

</div>

</nav>

<!– /.Navbar –>

</header>

<!–/.Double navigation–>

<main>

<!– Sidebar navigation –>

<!–Title–>

<li>

<br>

<font color="white"> sidebar</font>

</strong>

</h6>

</li>

<!–/.Title–>

<!– Side navigation links –>

<li>

<li>

<strong> sidebar</strong>

</a>

</li>

</ul>

</li>

<!–/. Side navigation links –>

</ul>

</div>

<!–/. Sidebar navigation –>

</div>

<h2 class="font-bold">content</h2>