Customizing the Header section

< Applying Customizations page

This Wiki page will lead you through the customization of the Header component. In case of issues, feel free to enter in our community on .

Header component

The entire code that belongs to the Header can be found at see on GitHub:

/src/app/header

Component schema

The Header component files are based on the schema below:

File	Description
header.component.html	Contains the view template
header.component.scss	Contains the styles
header.component.responsivity.scss	Contains the responsive styles
header.component.ts	Contains the component's logic

Customizing the LOGO

Currently, the logo GBASTOS is a text element that can be updated at header.component.html:8:

<div class="child logo-container" itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <a (click)="resetMenu()" href="#" class="logo" itemprop="name" itemprop="logo">gbastos</a>
</div>