#### HTML Structure

#### Header Structure

General HTML structure is the same throughout the template. Here is the header structure.

                        <nav role="navigation" class="header-navbar navbar navbar-with-menu fixed-top navbar-semi-dark navbar-shadow">
                            <div class="navbar-wrapper">
                                <div class="navbar-header">
                                    .....
                                </div>
                                <div class="navbar-container content container-fluid">
                                    <div id="navbar-mobile" class="collapse navbar-expand-sm">
                                        .....
                                    </div>
                                </div>
                            </div>
                        </nav>
                        <div id="fullscreen-search" class="fullscreen-search">
                            .....
                        </div>
                        <div class="fullscreen-search-overlay"></div>

#### Menu Structure

Generate modern menu using below menu structure.

                        <div id="main-menu" data-scroll-to-active="true" class="main-menu menu-dark menu-fixed menu-shadow menu-accordion">
                            <!-- main menu header-->
                            <div class="main-menu-header">
                                <input type="text" placeholder="Search" class="menu-search form-control round"/>
                            </div>
                            <!-- / main menu header-->
                            <!-- main menu content-->
                            <div class="main-menu-content">
                                <ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
                                    .....
                                </ul>
                            </div>
                            <!-- /main menu content-->
                            <!-- main menu footer-->
                            <div class="main-menu-footer footer-close">
                                .....
                            </div>
                            <!-- main menu footer-->
                        </div>

#### Content Structure

Generate modern content area using following structure.

                        <div class="modern-content content container-fluid">
                            <div class="content-wrapper">
                                <div class="content-header row">
                                    .....
                                </div>
                                <div class="content-body">
                                    .....
                                </div>
                            </div>
                        </div>

#### Footer Structure

Last but not least, footer structure to complete modern structure.

                        <footer class="footer footer-light">
                            .....
                        </footer>