How to get navbar to display as static top

Question

How to get navbar to display as static top

Coreysan 1,811

I'm a novice with navbar. I'm using bootstrap 4.3.1, and want to use the code I learned in a class to be static at the top.
I hope this doesn't get difficult! Can this be done with a minimum of work?

I attached the code because when I include it here, I get access denied.
162930-code-sample.txt

Any advice would be appreciated!

Accepted answer

2 additional answers

Your answer

Answer 1

Rebin Qadir 151 Volunteer Moderator

Add navbar-fixed-top class to fixed the navbar.

<nav class="navbar navbar-expand-lg navbar-light text-center navbar-fixed-top">

Answer 2

Coreysan 1,811

Thank you for your suggestion. I am very puzzled why it didn't work. I even tried "navbar-static-top" and nothing works at all.

I know that the <nav>div is wrapped with the <header> div.

If I tweak the <header> div then I get some results, but I break other things. Right now there's no classes declared for <header>.

Any thoughts?

(This is using MVC Core)

Rebin Qadir 151 Reputation points Volunteer Moderator

2022-01-10T09:57:33.023+00:00

Did you try <header style="position:fixed"> before or you may take a look this example
https://getbootstrap.com/docs/4.0/examples/navbar-fixed/
Coreysan 1,811 Reputation points

2022-01-10T16:54:14.033+00:00

I was hoping to simply modify the code as auto-generated in Visual Studio 2019 (MVC Core App),
but it doesn't work correctly.

I added position:fixed to the header div, but it truncates the width of the bar. So I also added "width:100%",
and while that fixed the width of the bar, it overwrites the top sections of "views/home/index.html".
It's not a good thing!

So I'll spend some time creating a navbar from scratch using the getbootstrap docs.

The reason I pursued this is because the project I created was from a class project, and if I rewrite the entire navbar,
I just hope it doesn't break anything else.

Thanks so much for your help. If you have any other thoughts, let me know - I'm truly grateful!
Coreysan 1,811 Reputation points

2022-01-10T17:16:34.093+00:00

Also, I tried using "fixed-top" in the navbar list of classes, which offers a solution, but although it works,
it still overlays the "views/home/Index.html" contents at the top.

But we're getting closer!

Answer 3

Coreysan 1,811

This works:

But I hear that sticky-top isn't necessarily supported on other browsers.

Share via

How to get navbar to display as static top

2 additional answers

Your answer