Website Settings (Navbar Template) Trying to style the navbar

Is there a way to style the web template Primary Navbar? or create your own Navbar template

I wanted the navbar in my website to follow on scroll or to be styled and I don’t know how to create a web template for navbar. I didn’t want to create my own navbar, I just want to style the default navbar on changing it’s color or font of the text.

On creating the web template for navbar, I don’t know if it needs just only Css, html or JS

If I styled the navbar template with a web template focusing on CSS, the navbar items I inputted in the website settings doesn’t show up.

Maybe there are some other ways to style the navbar but I’ve done it by creating a custom app (in order to stay as less invasive as posible) and overwriting some files contained in these folders, namely:

/public/css
/public/scss
/templates/includes/navbar
Plus the corresponding bundling files.

You can overwrite as many files as needed, depending on how deep you want to get into customization. I recommend you to explore files included into /public folder on ERPNext in order to understand which ones you need and how are they connected to each other, that way you’ll know which ones you’ll need in your custom app.
Also I added app_logo_url via hooks.py (from custom app) to change navbar’s logo. That logo should be uploaded into /public/images and its route should start with /assets.

Hope this helps :slight_smile:

2 Likes