The Odoo website has a default 'Contact Us' button in its Navbar. 

--------------

|  Contact Us |

---------------

The existing template for 'Contact Us' button (id=website.header_call_to_action) is  located in webiste_templates.xml and it was coded as follows. 

<template id="website.header_call_to_action" inherit_id="website.placeholder_header_call_to_action" name="Header Call to Action" active="True">
    <xpath expr="." position="inside">
        <li t-attf-class="#{_item_class}">
            <div t-attf-class="oe_structure oe_structure_solo #{_div_class}">
                <section class="oe_unremovable oe_unmovable s_text_block" data-snippet="s_text_block" data-name="Text">
                    <div class="container">
                        <a href="/contactus" class="oe_unremovable btn btn-primary btn_cta">Contact Us</a>
                    </div>
                </section>
            </div>
        </li>
    </xpath>
</template>

I just wanted to add a new <span> element inside <a> tag of above template as follows. (I already have a module created with the name 'mytheme')

<template id="mytheme.header_call_to_action" inherit_id="website.header_call_to_action" name="Header Call to Action"
          active="True">
    <xpath expr="//a[hasclass('oe_unremovable')]" position="inside">
        <span class="badge rounded-pill">Free</span>
    </xpath>
</template>

 I added the above code('My Custom Call to Action') inside an xml file called 'custom_header.xml' which was inherited from 'website.layout'

<odoo>
    <template id="header" inherit_id="website.layout" name="My Custom Header">
        <xpath expr="//header" position="replace">
            <nav>
                <t t-call="website.navbar">
                    <t t-set="_nav_class" t-valuef="navbar"/>
                    <div class="container-fluid">
                        <!-- Brand -->
                        <t t-call="website.placeholder_header_brand">
                            <t t-set="_link_class" t-valuef="navbar-brand d-flex align-items-center"/>
                        </t>
                        
                            <div class="d-flex align-items-center gap-2">
                                <!-- My Custom Call To Action -->
                                <t t-call="mytheme.header_call_to_action"/>
                            </div>
                    </div>
                </t>
            </nav>
        </xpath>

    </template>



<!-- My Custom Call To Action -->
    <template id="mytheme.header_call_to_action" inherit_id="website.header_call_to_action" name="Header Call to Action"
              active="True">
        <xpath expr="//a[hasclass('oe_unremovable')]" position="inside">
            <span class="badge rounded-pill">Free</span>
        </xpath>
    </template>
</odoo>

Here is the error message I received. Thanks in advance for your suggestions. 

Error message:

Error while render the template
ValueError: View 'mytheme.header_call_to_action' in website 1 not found
Template: website.layout