<div id="top-navigation" class="relative">
    <div class="container">
        <nav id="secondary-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                <span class="menu-label"><?php echo esc_html__( 'Top', 'ostrich-magazine' ) ?></span>
                <svg viewBox="0 0 40 40" class="icon-menu">
                    <g>
                        <rect y="7" width="40" height="2"/>
                        <rect y="19" width="40" height="2"/>
                        <rect y="31" width="40" height="2"/>
                    </g>
                </svg>
                <svg viewBox="0 0 612 612" class="icon-close">
                    <polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 
                    306,341.411 576.521,611.397 612,575.997 341.459,306.011"/>
                </svg>
            </button>

            <?php if ( has_nav_menu( 'top-bar' ) && get_theme_mod( 'ostrich_magazine_enable_secondary_menu', false ) == true ) : ?>
                 <?php 
                    wp_nav_menu( array(
                        'theme_location' => 'top-bar',
                        'container' => false,
                        'menu_id'     => 'secondary-menu',
                        'menu_class'     => 'menu nav-menu',
                    ) );
                ?>
            <?php endif; ?>

            <?php if ( has_nav_menu( 'social' ) && get_theme_mod( 'ostrich_magazine_enable_header_social_menu', false ) == true  ) : ?>
            <?php  
                $date_html = '';
                if ( get_theme_mod( 'ostrich_magazine_enable_header_date', false ) == true ) {
                    $date_html .= '<li class="date">
                               <a href="#" rel="bookmark">
                                    <time class="entry-date published updated" datetime="2018-04-06T11:33:16+00:00">'.esc_html(  date("jS \of F Y ") ).'</time>
                                </a>
                            </li>';
                }
               
                wp_nav_menu(  array(
                    'theme_location' => 'social',
                    'container' => 'div',
                    'container_class' => 'social-icons',
                    'echo' => true,
                    'depth' => 1,
                    'link_before' => '<span class="screen-reader-text">',
                    'link_after' => '</span>',
                    'fallback_cb' => false,
                    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s' . $date_html . '</ul>',
                ) );
            ?>
            <?php endif; ?>
        </nav><!-- .main-navigation-->
    </div><!-- .container -->
</div><!-- #top-navigation -->

<header id="masthead" class="site-header" role="banner" style="background-image: url('<?php echo esc_url( get_theme_mod( 'ostrich_magazine_header_bg_image', '' ) ); ?>')">
    <div class="container">
        <div class="site-branding-wrapper">
             <div class="site-branding">
                <?php if ( has_custom_logo() ) : ?>
                    <div class="site-logo">
                        <?php the_custom_logo(); ?>
                    </div><!-- .site-logo -->
                <?php endif; ?>
                <?php if ( get_theme_mod( 'bloz_pro_header_text_display', true ) == true ): ?>
                    <div id="site-identity">
                        <?php
                        if ( is_front_page() ) : ?>
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                        <?php else : ?>
                            <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                        <?php
                        endif;

                        $description = get_bloginfo( 'description', 'display' );
                        if ( $description || is_customize_preview() ) : ?>
                            <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
                        <?php
                        endif; ?>
                    </div>
                <?php endif; ?>
                
            </div>

            <?php if ( !empty( get_theme_mod( 'ostrich_magazine_ads_image', '' ) ) ): ?>
                <div class="site-advertisement">
                    <a href="<?php echo esc_url( get_theme_mod( 'ostrich_magazine_ads_url', '' ) ); ?>"><img src="<?php echo esc_url( get_theme_mod( 'ostrich_magazine_ads_image', '' ) ); ?>"></a>
                </div><!-- .site-advertiseent -->
            <?php endif ?>
            
        </div><!-- .site-branding-wrapper -->
    </div><!-- .container -->
   
    <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu">
        <div class="container">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                <span class="menu-label"><?php echo __( 'Menu', 'ostrich-magazine' ) ?></span>
                <svg viewBox="0 0 40 40" class="icon-menu">
                    <g>
                        <rect y="7" width="40" height="2"/>
                        <rect y="19" width="40" height="2"/>
                        <rect y="31" width="40" height="2"/>
                    </g>
                </svg>
                <svg viewBox="0 0 612 612" class="icon-close">
                    <polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 
                    306,341.411 576.521,611.397 612,575.997 341.459,306.011"/>
                </svg>
            </button>
            <?php if ( has_nav_menu( 'primary' ) ) : ?>                    
                <?php
                    $search_html = '
                            <li class="search-menu">
                                <a href="#" class="search">' . 
                                    ostrich_magazine_get_svg( array( 'icon' =>'search' ) ) .
                                    ostrich_magazine_get_svg( array( 'icon' =>'close' ) ) .
                                '</a>
                                <div id="search">' .
                                    get_search_form( $echo = false ) .
                                '</div><!-- #search -->
                            </li>';
                    wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_id'        => 'primary-menu',
                    'menu_class'     => 'menu nav-menu',  
                    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s' . $search_html . '</ul>',                  
                ) );
                ?>
            <?php elseif( current_user_can( 'edit_theme_options' ) ): ?>
                <ul id="primary-menu" class="menu nav-menu">
                    <li><a href="<?php echo esc_url( admin_url( 'nav-menus.php' ) ); ?>"><?php echo esc_html__( 'Add a menu', 'ostrich-magazine' );?></a></li>
                </ul>
        <?php endif; ?> 
    </nav><!-- .main-navigation-->

</header><!-- #masthead -->