Navigate to section in page but after a break

Hi everyone!

I am trying to make a sidebar which navigates to different sections of the same page.
I took the code from this post as an example.

The problem is that I also have a NavBar with a certain background color on top of the page. So when items from sidebar are clicked they are scrolled to the very top of the page and the first row or two of the content gets hidden under the navbar.

Is there any way to tell NavLink to scroll to the section of the page but start that section right after the NavBar ? Or scroll to the section of the page but paste a couple “html.Br()” before the content so that breaks get under NavBar and then content starts?

The code from the link I pasted above uses this:
dbc.NavLink(“Home”, href=“#start”, external_link=True)

Can we somehow change it to something like:
dbc.NavLink(“Home”, “html.Br()”+ href=“#start”, external_link=True)

The only “work-around” I came up with is to make the NavBar transparent. Then NavLink takes the selected section of the page to the very top, but because NavBar is transparent no content is hidden.
But if possible I would like to keep the background color of the NavBar and make NavLink start the content after the NavBar.

I hope I was able to explain the issue clearly.

Thanks in advance for any help and recommendations.

Kind regards.

HI @mrel ,
Have you tried looking into Dash Pages?
One possible solution to the above question is to create your navbar in the app.layout (in the file), then, below the navbar, put the dash.page_container. Ann’s repo has many good examples of multipage dash apps.