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

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?

@eleben:

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

    ../myapp/myapp/public/js/myapp.bundle.js:2:7:
      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.

@Brianmbewe:
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”.
image

[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 ?

That’s what I want to do too. I still haven’t found out how to do it. I don’t want to modify the core code. I want to override the navbar in desk view with my custom app.

1 Like

some one told me to make update of js file and file build.json but i didnot figure which files to be updated?

I just create a guide here.

https://discuss.frappe.io/t/guide-modifying-frappe-app-navbar