How to override navbar.html in custom app in V14?

I’m trying to customise the navbar on an ERPNext V14 system. I have a custom app and I want to override navbar.html with one in the app. From the thread linked below, I think I need to place my custom navbar.html in:

However, in that thread, Patrick.St mentions adding the file to the app’s build.json. In V14, build.json no longer exists, I believe.

I have placed my custom navbar.html in the directory in my app and rebuilt but the navbar appears unchanged. Am I putting my template in the correct place in the directory structure and if so, what else do I need to do for it to be used?

Should it not be in apps/myapp/myapp/templates/includes/navbar/navbar.html

Thank you, eleben. I just tried that but it is still not overriding the default navbar.
Do I need to do something else to make it override? As I said, in the original thread Patrick.St needed to include the file in build.json. The V14 equivalent is to include it in a .js bundle in apps/myapp/myapp/public/js but when I try that, “bench build” warns that it cannot include the file. I think it cannot include anything that is outside apps/myapp/myapp/public/js

You would only need to include that file in the build.json file if it was js code. Otherwise if the path is correct, frappe will override with your custom html file.

Try doing the following as well:

bench build --app CustomAppNameHere
bench clear-cache

Can you do a screen capture of what the result of the bench build is?

Hi @BillJ Did you manage to override the CSS? if the answer is yes, how did you do it?


▲ [WARNING] [plugin frappe-html] There was an error importing /home/frappe/frappe-bench/apps/myapp/myapp/public/js/templates/saabits/ui/toolbar/navbar.html

      2 │ import "./templates/myapp/ui/toolbar/navbar.html";
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    

I think it should be fine to include .html templates in the bundle. apps/erpnext/erpnext/public/js/erpnext.bundle.js includes quite a few HTML templates without any problems.

However, I don’t think this is what I need to do. I really need to find the correct path to put my navbar.html in to override the nav-bar in the desk view. If I put an edited navbar.html in apps/myapp/myapp/templates/includes/navbar/navbar.html, without putting it in the bundle, then it correctly overrides the nav-bar in the web-site view but that isn’t what I’m trying to do.

I’m not trying to override the CSS, I’m trying to override the navbar.html template in the desk view.
No, I haven’t succeeded yet.

Another option to create custom navbar
Website>>Web Template>>Add new

Link this template in website setting Navbar Template field

Thank you, Darshit.
That is a great way to customise the nav-bar for the website view without using a custom app. However, I could not see how to use it to customise the nav-bar for the desk view, which is what I am trying to customise.

Hello @BillJ , I managed to override the nav bar in desk view by running frappe build after writing some custom code and embedded CSS in navbar.html. Please let me know if you manage.

Hi, @Brianmbewe.
I haven’t yet managed it. How did you do it? Where did you put your new navbar.html?

Hi @BillJ Just keep a back up of your navbar.html (for desk) and override the existing one and once you’re done writing your custom code run “bench build”.

[quote=“Brianmbewe, post:13, topic:107252, full:true”]
Hi @BillJ Just keep a back up of your navbar.html (for desk) and override the existing one and once you’re done writing your custom code run “bench build”.[/quote]

Thanks, Brian. I can do it that way and I know it will work but I was hoping to find the way to override it in my custom app without having to edit any core files.

@BillJ if you only overriding css like colors and stuff, you can create a file in the public/css folder and include it using hook file.

@bahaou I need to add code to the template but I will bear in mind that I can include CSS using the hook file because I’m sure I will need to style it too. Thank you.

how can i do that ples explain

did u manage to do it ??

Hello @Maaz you need to write a custom embedded css within your navbar.html and don’t forget to run your bench build command.

Hello sir thanks for your answer
but I want to replace the navabar of frappe desk
with my navbar in my custom app
did u get it ?