Advertisment

Go To > Theme Function  > Theme Header


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'frontier_before_body' ); ?>

<?php if ( is_active_sidebar( 'widgets_body' ) ) dynamic_sidebar( 'widgets_body' ); ?>

<div id="container" class="cf" <?php frontier_schema( 'container' ); ?>>
<?php do_action( 'frontier_before_container' ); ?>

<?php if ( frontier_option( 'top_bar_enable', 1) == 1 ) : ?>
<?php $bar_elements = frontier_option( 'top_bar_elements' ); ?>

<div id="top-bar" class="cf">
<?php do_action( 'frontier_before_top_bar' ); ?>

<div id="top-bar-info">
<?php if ( !isset($bar_elements['title']) || $bar_elements['title'] == 1 ) : ?>
<?php $htag = ( is_singular() && !is_home() ) ? 'h2' : 'h1'; ?>
<?php echo '<' . $htag . ' id="site-title">'; ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo apply_filters( 'frontier_top_bar_title', get_bloginfo( 'name' ) ); ?></a><?php echo '</' . $htag . '>'; ?>
<?php endif; ?>

<?php if ( !isset($bar_elements['description']) || $bar_elements['description'] == 1 ) : ?>
<h4 id="site-description"><?php echo apply_filters( 'frontier_top_bar_description', get_bloginfo( 'description' ) ); ?></h4>
<?php endif; ?>
</div>
<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Home</a></li>
    <li><a href="#about">Recent Update</a></li>
<li><a href="#careers">E-Books</a></li>
    <li><a href="#careers">About us</a></li>
<li><a href="#careers">Privacy Policy</a></li>
    <li><a href="#contact">Contact us</a></li>
  </ul>
</header>
<?php if ( isset( $bar_elements['top_menu'] ) && $bar_elements['top_menu'] == 1 ) : ?>
<nav id="nav-top">
<?php wp_nav_menu( array(
'theme_location' => 'frontier-menu-top',
'container' => false,
'menu_class' => 'nav-top',
'depth'  => 1,
'fallback_cb' => false ) );
?>
</nav>
<?php endif; ?>

<?php do_action( 'frontier_after_top_bar' ); ?>
</div>
<?php endif; ?>

<?php if ( frontier_option( 'header_enable', 1) == 1 ) : ?>
<div id="header" class="cf" <?php frontier_schema( 'header' ); ?>>
<?php do_action( 'frontier_before_header' ); ?>

<?php if ( frontier_option( 'header_logo', get_template_directory_uri() . '/images/logo.png' ) ) : ?>
<div id="header-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo frontier_option( 'header_logo', get_template_directory_uri() . '/images/logo.png' ); ?>" alt="<?php echo get_bloginfo( 'name' ); ?>" /></a>
</div>
<?php endif; ?>

<?php if ( is_active_sidebar( 'widgets_header' ) ) dynamic_sidebar( 'widgets_header' ); ?>

<?php do_action( 'frontier_after_header' ); ?>
</div>
<?php endif; ?>

<?php if ( frontier_option( 'main_menu_enable', 1) == 1 ) : ?>
<?php $menu_style = frontier_option( 'main_menu_style', 'drop' ); ?>

<nav id="nav-main" class="cf <?php echo $menu_style; ?>" <?php frontier_schema( 'nav-main' ); ?>>
<?php do_action( 'frontier_before_menu' ); ?>
<?php if ( $menu_style == 'drop' ) : ?>
<a href="#" class="drop-toggle"><span class="genericon genericon-menu"></span></a>
<?php endif; ?>
<?php wp_nav_menu( array(
'theme_location' => 'frontier-menu-primary',
'container' => false,
'menu_class' => 'nav-main',
'fallback_cb' => 'wp_page_menu' ) );
?>

<?php do_action( 'frontier_after_menu' ); ?>
</nav>
<?php endif; ?>

<?php if ( is_active_sidebar( 'widgets_below_menu' ) ) : ?>
<div id="below-menu" class="cf">
<div id="widgets-wrap-below-menu" class="cf"><?php dynamic_sidebar( 'widgets_below_menu' ); ?></div>
</div>
<?php endif; ?>

<div id="main" class="<?php echo frontier_option( 'column_layout', 'col-cs' ); ?> cf">
<?php do_action( 'frontier_before_main' ); ?>

CSS Setup:

Go To > Frontier Option > Custom CSS


/* top customized nav */
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  padding: 20px 20px;
  text-decoration: none;
  color:#fff;
  font-weight: 600;
}

.header li a:hover,
.header .menu-btn:hover {
  color: #50ff00;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: left;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* theme top nav */
#nav-top .nav-top a{
padding: 0 3px;
}
Tags

Post a Comment

Leave with comments

একটি মন্তব্য পোস্ট করুন

Leave with comments

নবীনতর পূর্বতন

Advertisement

Advertisement