How to fix bootstrap navbar to top with sidebar

Question

I am developing a page in which I have both sidebar as well as navbar I have to make my navbar fix to the top so that it is a better user experience.

Issue

But when I am using inbuilt fixed-top bootstrap class it is overriding the sidebar, my navbar starts after the width of sidebar,

So I just want to make that fixed at the top so that scrolling becomes easier

My navbar code

<div>
        <Navbar collapseOnSelect expand="lg" className="py-3 navbar_style">
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto"></Nav>
                <Nav>
                    <Nav.Link href="#deets">Logout</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    </div>

Side bar CSS

.sidebar {
height: 100%;
width: 100px;
position: fixed;
top: 0;
left: 0;
transition: all 0.6s;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;

}

Working code Sandbox

I have written the minimal code in sandbox, I just want to fix navbar to the top without overriding my sidebar, please check the code sandbox

So you want to fix the nav bar at the top of the screen, but beneath the sidebar? Am I understanding your question correctly? Why can't you just do position: fixed, zIndex: 0? — John Farkerson, Aug 17 '20 at 07:25
Does this answer your question? [z-index not working with fixed positioning](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) — ino, Aug 17 '20 at 07:47

ino · Answer 1 · 2020-08-17T07:35:36.680

0

Navbar{
  z-index: 1000;
}
.sidebar {
  z-index: 500;
}

it will be working fine.

edited Aug 17 '20 at 07:35

answered Aug 17 '20 at 07:27

ino

1,002
1
8
25

John Farkerson · Answer 2 · 2020-08-17T07:32:30.913

0

Unless I'm misunderstanding your question, this should do it:

.navbar_style{
  z-index: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

edited Aug 17 '20 at 07:32

answered Aug 17 '20 at 07:28

John Farkerson

2,543
2
23
33

nop it is overriding the sidebar, you can check the code – manish thakur Aug 17 '20 at 07:31
I don't understand what you mean by "overriding the sidebar". Do you want the navbar to be below or above the sidebar? – John Farkerson Aug 17 '20 at 07:31
If you want it below the sidebar then change z index to 0 @manish – John Farkerson Aug 17 '20 at 07:32

Dexterians · Answer 3 · 2020-08-17T07:51:34.647

If I understand correctly, the position of the header nav is overlapping the sidebar nav - this is because both items are fixed. After you add fixed-top to your navbar you will need to use margin-top on your sidebar to add a buffer and push your sidebar down. Example;

.sidebar {
    height: 100%;
    width: 233px;
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    transition: all 0.6s;
    background: rgb(167, 144, 144);
    box-shadow: 0px 3px 6px #e0cccc29;
    opacity: 1;
    margin-top: 72px; /**<--add this**/
}

You have to adjust this to whatever the size of your top navbar is. Using inspect I can see it is 72px so I set margin-top of your sidebar to be equal.

score 0 · Answer 4 · answered Aug 17 '20 at 07:45

0

Change positions

position:sticky to sidebar

.sidebar {
 position: sticky;
}

position:fixed to navbar_style

.navbar_style {
  position: fixed;
}

answered Aug 17 '20 at 07:45

Rayees AC

4,426
3
8
31

score 0 · Answer 5 · answered Jun 28 '22 at 02:43

0

you can add

sticky-top

class on both your sidebar and navbar class

answered Jun 28 '22 at 02:43

heyhadi

1

Please provide an explanation to your code - it is very hard to understand something when it isn't explained. – ethry Jul 02 '22 at 21:23

How to fix bootstrap navbar to top with sidebar

5 Answers5