Own fixed while scrolling Navbar

Development

AI-generated summary

A user, fuchs, is trying to add a custom fixed Navbar above the Discourse Navigation. They added the necessary HTML code to the Customize Section in Header, but it disappeared after adding CSS to make it fixed while scrolling. Lilly suggested that the user might be looking for a separate menu bar above the Discourse header and recommended checking existing #theme-component’s, specifically header specific components.

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 Customization > Theme component’s that might achieve what you are seeking if you look at the header specific components.