How to position my sidebar next to my content?

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

.jonathan. pro asked 7 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 7 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

.jonathan. pro commented 7 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>

Add comment

Ollie Vincent pro answered 7 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 7 years ago

2 1 Best answer

Hi,

Sorry,

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.

<!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>

<!– Font Awesome –>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!– Bootstrap core CSS –>

<link href="../css/bootstrap.min.css" rel="stylesheet">

<!– Material Design Bootstrap –>

<link href="../css/mdb.min.css" rel="stylesheet">

<!– Your custom styles (optional) –>

<link href="../css/Testing2.css" rel="stylesheet">
<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>

.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>

 

<body class="fixed-sn">

 

<!–Double navigation–>

<header>

 

<!–Navbar–>

<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>





<!– SideNav slide-out button –>

<div class="float-left">

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

</div>

 

</nav>

<!– /.Navbar –>

</header>

<!–/.Double navigation–>

 

<main>

 

<div class="container">

 

<div class="row">

<div class="col-md-3">

<!– Sidebar navigation –>

<div id="slide-out" class="side-nav #37474F fixed" style="margin-top: 66px">

<ul class="custom-scrollbar #37474F list-unstyled">

<!–Title–>

<li>

<br>

<h6 style="text-align: center">

<strong>

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

</strong>

</h6>

<hr class="hr-light text">

</li>

<!–/.Title–>

<!– Side navigation links –>

<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>

<!–/. Side navigation links –>

</ul>

<div class="sidenav-bg mask-strong"></div>

</div>

<!–/. Sidebar navigation –>

</div>





<div class="col-md-9 pt-5">

 

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

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

<p class="lead" style="margin-top: 15px"> Paragraph of content. </p>

</div>

 

</div>

</div>















</main>





<!– SCRIPTS –>

<!– JQuery –>

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

<!– Bootstrap tooltips –>

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

<!– Bootstrap core JavaScript –>

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

<!– MDB core JavaScript –>

<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>

.jonathan. pro commented 7 years ago

Thank you so much!! It works good. The only issue I have now is that when the side bar and content are in the middle together, the width they take looks small. I will like to have it exactly how you coded since it works, but I want them (the sidebar and content) to extend a little bit and take more width in the middle since right now their width is kinda small. I'm thinking maybe it has to do with the width of the container. I asked in a separate page how to increase the container's width (I think you responded so thanks again) but is not working too well since both containers increase a little different. Also, do you know how can I include the whole navbar inside the container? I assume maybe just one container and everything inside but not sure if that's the solution. Thanks again for all the help! Let me know if you can find the solutions.

Add comment

Ollie Vincent pro answered 7 years ago

1 1 Best answer

So the sidebar has a left:0 on it. you could do left:100px; or something? I managed to get the sidebar sticky if that is what you are looking for: http://olliev.co.uk/sticky-sidenav/sidebar.html

.jonathan. pro commented 7 years ago

So the website on that link is somewhat what I'm looking for but the issue is still there. That side bar is still stuck on the far left and not next to the content. It is next to the big picture on top but not the content (middle content or the whole thing) in itself. Not to mention the big top picture stops being responsive at some point while middle part separates from the side bar. If the screen gets widen, the middle content separates from the side bar. So it doesn't work either. So again, this is what I'm looking to achieve: Navbar (Space) Side Bar | Content (Space) As the screen keeps getting wider, only the spaces in the corners keep expanding while the side bar and content stays there next to each other in the middle. Any idea how to achieve this? Thanks.

Add comment

Ollie Vincent pro answered 7 years ago

0 1 Best answer

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 :)

.jonathan. pro commented 7 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!!

Add comment

Ollie Vincent pro answered 7 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

.jonathan. pro commented 7 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 7 years ago

0 1 Best answer

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

goluma 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

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

.jodadev.

Pro User

41Support score
15Questions 1Answers

0Snippets likes 1Snippets