Own fixed while scrolling Navbar

dev
1

Hello Discourse Community,

I have a question. I want to add my own fixed while scrolling Navbar on top of the Discourse Navigation.

So I added this part to the Customize Section in Header:

<div class="navbar">
    <div class="logo-container">
        <a href="https://www./"><img id="brand-logo" class="logo" src="logo.png" title="logo "></a> 
    </div>
    <div class="links-container">
        <a class="rt-border" href="https://www./"><i class="fa fa-fw fa-home"></i><span>Link 1</span></a> 
        <a class="rt-border" href="https://www./"><i class="fa fa-fw fa-link2"></i> <span>Link 2</span></a> 
        <a class="rt-border" href="https://www./"><i class="fa fa-fw fa-link3"></i><span>Link 3</span></a> 
    </div>
</div>

To make it a fixed navigation while scrolling I added this part to the class “navbar”:

position: fixed;
top: 0;
width: 100%;

But then my navbar is gone and only the discourse navigation is there and fixed while scrolling?

Thanks for the help!!

2

Do you mean a separate menu bar above the Discourse header? There are some existing theme-component’s that might achieve what you are seeking if you look at the header specific components.

3 Likes