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>

You can also replace the text element with an image tag <img>.

Customizing the NAV-BAR

Add a new menu item

The nav-container is correlated to each section that composes the resume template, look the snippet below:

<ul>
    <li><a (click)="resetMenu()" href="#about" i18n="nav@@aboutMe" itemprop="url"><span itemprop="name">About me</span></a></li>
    <li><a (click)="resetMenu()" href="#experience" i18n="nav@@experiences" itemprop="url"><span itemprop="name">Experiences</span></a></li>
    <li><a (click)="resetMenu()" href="#posts" i18n="nav@@posts" itemprop="url"><span itemprop="name">Posts</span></a></li>
    <li><a (click)="resetMenu()" href="#contact" i18n="nav@@contact" itemprop="url"><span itemprop="name">Contact</span></a></li>
</ul>

Notice that each <li> contains an anchor tag <a> that points to the ID attribute of each section of the template (e.g: #about). The main router file knows how to handle each path. Basically, the fragment routing is being used, to relate the anchor <a href="#about"> with an <section id="about"> inner the About component template.

In order to add a new element to the navigation, you just need to append inner the <ul> a new <li>.

Let's suppose you want to add a new item called Projects, see code below:

<li><a (click)="resetMenu()" href="#projects" i18n="nav@@projects" itemprop="url"><span itemprop="name">Projects</span></a></li>

Where we have:

• href="#projects" - The href attribute that matches with the id attribute of the <section id="projects"> inner the new component that should be also created. This will bind the click of the Projects in the nav with its respective component.