In our template, we have implemented a quick way to create the same header for all pages with the ability to easily edit the main menu and logo. Also, you can hold on to the classic method of a hard-coded menu and logo. In both cases, the main structure of the header will look like this:

 Header 
header id="anita-header" class="anita-header"
    div class="anita-header-inner"
        div class="anita-logo-wrapper"
            ...
        /div
        div class="anita-menu-wrapper"
            ...
        /div
    /div
/header

As you can see, there are two blocks inside the div.anita-header-inner. The first block div.anita-logo-wrapper is a container for the logo, and the second one div.anita-menu-wrapper is used for the simple main menu or the menu toggle button if the fullscreen menu option is used.

Logo

First of all, let's talk about the logo. Here is an example of the code to put inside the logo container.

 Logo 
a href="index.html" class="anita-logo is-retina"
    img src="img/logo.png" alt="Anita Photography" width="192" height="80"
/a

In the a/ tag, you specify the URL of your home page in the href attribute. The class anita-logo is required to identify this link as a logo, and the class is-retina is optional but highly recommended to make your logo looks good on the retina displays. In case the is-retina class is used, your logo should be 2x the displayed size. For example, if you wish to show your logo as 96x40 pixels size, your image file must be 192x80. Also, inside the img tag, where you put your logo URL, you should specify the width and height attributes of the original image size.

Main Menu

Now we will talk about the main menu. In our template, there are two layouts for the main menu. The first one is a fullscreen menu. It has a modern and minimal design and is well suited for a creative portfolio website. To create the fullscreen menu for your page, you should add the toggle menu button into the div.anita-menu-wrapper and another div.anita-fullscreen-menu-wrap block after the /header. Here is an example of the markup:

        ...
        div class="anita-menu-wrapper"
            ...
             Menu Toggle Button 
            a href="#" class="anita-menu-toggler"
                i class="anita-menu-toggler-icon"/i
            /a
        /div
    /div
/header

 Fullscreen Menu 
div class="anita-fullscreen-menu-wrap"
    nav class="anita-nav anita-js-menu"/nav
/div

That is all you need right now. you can pay attention to the additional class anita-js-menu and wonder where exactly the menu is. But we will talk about this a little later. For now, let's look at the markup for a simple menu. It has a classic, simple look and still looks good for today's creative websites.

        ...
        div class="anita-menu-wrapper"
            ...
             Simple Menu Nav 
            nav class="anita-nav anita-simple-nav anita-js-menu"/nav
        /div
    /div
/header

As you can see, for now, the tag nav is placed directly into the div.anita-menu-wrapper block and has the additional class anita-simple-nav. But, there is still no menu code here. So, what is going on? Now we will explain.

We have already drawn your attention to the additional class anita-js-menu. Thanks to it, the menu is created automatically for all pages according to the configuration in the core script file js/core.js. At the beginning of this file, you can see the constant object of the template config. And the first option is main_menu:

*
* Author: Shadow Themes
* Author URL: https://shadow-themes.com

"use strict";

 --- Anita Config --- 
const anita_config = {
     --- Header and Menu --- 
    main_menu: {
        'Works': {
            'Slide Carousel': 'index.html',
            'Roll Carousel': 'works-carousel-roll.html',
            'Fullscreen Slider': {
                'Parallax Movement': 'works-slider-parallax.html',
                'Fade Sliding': 'works-slider-fade.html',
                'Diagonally Sliced': 'works-slider-sliced.html',
                'Pixel Storm': 'works-slider-pixels.html'
            },
            'Flat Carousel': 'works-carousel-flat.html',
            'Classic Grid': 'works-classic-grid.html',
            'Simple Menu': 'simple-menu.html'
        },
        'Galleries': {
            'WebGL Carousel': 'albums-gl-carousel.html',
            'Flat Carousel': 'albums-carousel.html',
            'Slider': {
                'Parallax Movement': 'albums-slider-parallax.html',
                'Fade Sliding': 'albums-slider-fade.html',
                'Diagonally Sliced': 'albums-slider-sliced.html',
                'Pixel Storm': 'albums-slider-pixels.html'
            },
            'Adjusted Grid': {
                'Adjusted: 2 Columns': 'albums-adjusted-2col.html',
                'Adjusted: 3 Columns': 'albums-adjusted-3col.html',
                'Adjusted: 4 Columns': 'albums-adjusted-4col.html'
            },
            'Strong Grid': {
                'Grid: 2 Columns': 'albums-grid-2col.html',
                'Grid: 3 Columns': 'albums-grid-3col.html',
                'Grid: 4 Columns': 'albums-grid-4col.html'
            },
            'Masonry Grid': {
                'Masonry: 2 Columns': 'albums-masonry-2col.html',
                'Masonry: 3 Columns': 'albums-masonry-3col.html',
                'Masonry: 4 Columns': 'albums-masonry-4col.html'
            },
            'Justified': 'albums-justified.html',
            'Bricks 1x2': 'albums-bricks-1x2.html',
            'Bricks 2x3': 'albums-bricks-2x3.html'
        },
        'About': 'page-about.html',
        'Services': 'page-services.html',
        'Testimonials': 'page-testimonials.html',
        'Contacts': 'page-contacts.html'
    }
    ...
}
...

As you can see, things are pretty simple. Inside the main_menu: { ... }, you create your main menu structure according to the following pattern:

'Menu Item Label': 'https://your_link_url',

Or the next one, if the menu item must content sub-menu:

'Item Label': {
    ...
},

Also, don't forget to use commas after each line. And that is all. Within one simple config file, you can easily add, change, and remove menu items from one place for all pages. Isn't it great? This works both for simple and fullscreen menus and will be placed into the nav.anita-nav

But, if you plan to use our template for some CMS or has any other reasons not to use the procedural menu, here is a markup of the menu's HTML code:

ul class="main-menu"
    li class="menu-item-has-children current-menu-parent"
        ul class="sub-menu"
            li class="current-menu-item"
                a href="index.html"Slide Carousel/a
            /li
            li
                a href="works-carousel-roll.html"Roll Carousel/a
            /li
            li class="menu-item-has-children"
                a href="#"Fullscreen Slider/a
                ul class="sub-menu"
                    li
                        a href="works-slider-parallax.html"Parallax Movement/a
                    /li
                    li
                        a href="works-slider-fade.html"Fade Sliding/a
                    /li
                    li
                        a href="works-slider-sliced.html"Diagonally Sliced/a
                    /li
                    li
                        a href="works-slider-pixels.html"Pixel Storm/a
                    /li
                /ul
            /li
            li
                a href="works-carousel-flat.html"Flat Carousel/a
            /li
            li
                a href="works-classic-grid.html"Classic Grid/a
            /li
            li
                a href="simple-menu.html"Simple Menu/a
            /li
        /ul
    /li
    li class="menu-item-has-children"
        a href="#"Galleries/a
        ul class="sub-menu"
            li
                a href="albums-gl-carousel.html"WebGL Carousel/a
            /li
            li
                a href="albums-carousel.html"Flat Carousel/a
            /li
            li class="menu-item-has-children"
                a href="#"Slider/a
                ul class="sub-menu"
                    li
                        a href="albums-slider-parallax.html"Parallax Movement/a
                    /li
                    li
                        a href="albums-slider-fade.html"Fade Sliding/a
                    /li
                    li
                        a href="albums-slider-sliced.html"Diagonally Sliced/a
                    /li
                    li
                        a href="albums-slider-pixels.html"Pixel Storm/a
                    /li
                /ul
            /li
            li class="menu-item-has-children"
                a href="#"Adjusted Grid/a
                ul class="sub-menu"
                    li
                        a href="albums-adjusted-2col.html"Adjusted: 2 Columns/a
                    /li
                    li
                        a href="albums-adjusted-3col.html"Adjusted: 3 Columns/a
                    /li
                    li
                        a href="albums-adjusted-4col.html"Adjusted: 4 Columns/a
                    /li
                /ul
            /li
            li class="menu-item-has-children"
                a href="#"Strong Grid/a
                ul class="sub-menu"
                    li
                        a href="albums-grid-2col.html"Grid: 2 Columns/a
                    /li
                    li
                        a href="albums-grid-3col.html"Grid: 3 Columns/a
                    /li
                    li
                        a href="albums-grid-4col.html"Grid: 4 Columns/a
                    /li
                /ul
            /li
            li class="menu-item-has-children"
                a href="#"Masonry Grid/a
                ul class="sub-menu"
                    li
                        a href="albums-masonry-2col.html"Masonry: 2 Columns/a
                    /li
                    li
                        a href="albums-masonry-3col.html"Masonry: 3 Columns/a
                    /li
                    li
                        a href="albums-masonry-4col.html"Masonry: 4 Columns/a
                    /li
                /ul
            /li
            li
                a href="albums-justified.html"Justified/a
            /li
            li
                a href="albums-bricks-1x2.html"Bricks 1x2/a
            /li
            li
                a href="albums-bricks-2x3.html"Bricks 2x3/a
            /li
        /ul
    /li
    li
        a href="page-about.html"About/a
    /li
    li
        a href="page-services.html"Services/a
    /li
    li
        a href="page-testimonials.html"Testimonials/a
    /li
    li
        a href="page-contacts.html"Contacts/a
    /li
/ul

The important thing is to use the main-menu class for the main parent <ul>, the class menu-item-has-children for parent <li> items, and classes current-menu-parent and current-menu-item to highlight the parent of the current menu item <li> and the current menu item <li>. The sub-menu <ul> must have class sub-menu.

Additional Options

Now, when we have the logo and the main menu, let's take a look at the other options related to the header you can find in the config inside the js/core.js file:

...

// Option to stick the header to the top of the page
sticky_header: true,

// Menu items appear delay in milliseconds
fs_menu_delay: 100,

...