Fix a navbar to top of page net core website

Question

0.00/5 (No votes)

See more:

I have a navbar defined thus in my layout file

<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
Markup removed for brevity
</nav>
@RenderBody()
@RenderSection("OptionalStuff", false)
</div>

this renders all content centred on the page.
I would like to lock the navbar to the top of the page so it never scrolls out of sight
I've tried adding fixed-top to the navbar class list and it does work but it expands the navbar to the entire page width whilst the rest of the page remains centred. Any ideas as to how I can lock it to the top and keep the same layout

I hope this makes sense

What I have tried:

<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
</nav>
@RenderBody()
@RenderSection("OptionalStuff", false)
</div>

Posted 13-Nov-21 5:02am

pkfox

Updated 14-Nov-21 22:03pm

v2

Add a Solution

Comments

Peter_in_2780 14-Nov-21 6:55am

Posting as a comment not solution because I'm away from anywhere I could test it..
<div class="container">
<div class="fixed-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
</nav>
</div>
@Render....

Basically, wrap you navbar in a fixed-top div.
[edit] lots of &xxx; [/edit]

pkfox 14-Nov-21 8:17am

Hi Peter, same result the navbar goes the full screen width and the content is centred.

Peter_in_2780 15-Nov-21 1:41am

Try margin:auto on your navbar. That SHOULD stop it stretching width-wise to fill its container.
I'm shooting in the dark here because I have no real idea what your assorted CSS classes are doing.

pkfox 15-Nov-21 4:01am

Thanks for all your help Peter I do appreciate it, I don't have any custom CSS in the mix just the usual bootstrap.css. It's definitely fixed-top that stretches the navbar though.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-11-14T22:03:00

Solution 1

How about:

Razor

<div class="fixed-top">
    <div class="container">
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            ...
        </nav>
    </div>
</div>
<div class="container">
    @RenderBody()
    @RenderSection("OptionalStuff", false)
</div>

Posted 14-Nov-21 22:03pm

Richard Deeming

Comments

pkfox 15-Nov-21 4:24am

That did it thanks Richard