In this chapter we will show you how to create a header and main menu in our template. Let's start from the code markup for the header container:

    Header
    header
        Desktop Header
        div
            Header Logo
            div
                a
                    img
                /a
            /div
            Main Menu
            div
                nav
                    ...
                /nav
            /div
            Header Button
            div
                aGet a FREE Quote/a
            /div
        /div
        Mobile Header
        div
            a
                img
            /a
            a
                i
                    span/span
                    span/span
                    span/span
                /i
            /a
        /div
    /header

Main Menu

The main menu in the code is the unordered list with links to other pages. The main menu level must contain the class main-menu, and the sub menus must have the class sub-menu.

To highlight the active menu item, you can use the current-menu-item class for the li tag and the current-menu-parent class for the parent li tag.

Let's take a look at the example code:

    ...
    nav
        ul
            li
                aMain Menu Item/a
            /li
            li
                aActive Parent Menu Item/a
                ul
                    li
                        aLevel 02 Item 01/a
                    /li
                    li
                        aActive Sub-Menu Item/a
                    /li
                    li
                        aSub Menu Parent/a
                        ul
                            li
                                aLevel 03 Item 01/a
                            /li
                            li
                                aLevel 03 Item 02/a
                            /li
                            li
                                aLevel 03 Item 03/a
                            /li
                        /ul
                    /li
                    li
                        aLevel 02 Item 03/a
                    /li
                /ul
            /li
            li
                aMain Menu Item/a
            /li
            ...
        /ul
    /nav
    ...