Customizing the Header section

< Applying Customizations page

This Wiki page will lead you through the customization of the sections of the Header section. In case of issues, feel free to enter in our community on and post your questions.

Header component

The entire code that belongs to the Header can be found here:

/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

Adding a new menu item

The nav-container is correlated to each section that composes the resume template, look at 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:

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

Where we have:

• href="#projects" - The href attribute that matches with the id attribute of the <section id="projects"> into the new component. This will bind the click of the Projects in the nav with its respective component.
• i18n="nav@@projects" - The i18n is an property used by the internationalization lib (i18n). This will be used to create the custom translations. Read more about internationalization here.