Lisa geniHi to all I would like to get the nav menu in sticky header too, The sticky header should be fall still the website footer in dw-focus theme,
The sticky nav menu should show with logo , Is it possible to add through code in dwfocus ?
For ex : The text added as "Help us help YOU better and have chance to get awesome giveaway – Show Me How " in : http://www.designwall.com/
3 Answers
DominicRight now, the nav menu does not support to display in the sticky header. However, If you want I can help you custom some line code and style. Firstly, you can tell me detail about the position, color and what you want to display, you can send me username & password of your site (via private answer) for further checking.
Regards,
Hi,
To resolve this issue, you can do as the following:
- Open the
\wp-content\themes\dw-focus\footer.phpfile, add the following code under line 36:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
var shrinkHeader = 10;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.site-header-inner-wrap').addClass('site-header-inner-wrap-fixed');
}
else {
$('.site-header-inner-wrap').removeClass('site-header-inner-wrap-fixed');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
</script>- Open the
\wp-content\themes\dw-focus\header.phpfile, replace all the line code in this file with the following code:
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="content" class="site-content">
*
* @package DW Focus
* @since DW Focus 1.2.1
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<div class="container">
<header class="site-header">
<div class="site-header-inner-wrap">
<div class="row hidden-xs hidden-sm">
<div class="col-md-4">
<?php
if ( is_category() || is_single() ) {
$category = get_the_category();
if ( 0 == $category[0]->parent ) {
$parent_id = $category[0]->term_id;
} else {
$parent_id = $category[0]->parent;
}
$options = dw_focus_get_category_option( $parent_id );
if ( $options['logo'] ) {
$site_logo = wp_get_attachment_url( $options['logo'] );
} else {
$site_logo = dw_focus_get_theme_option( 'dw_logo_image' );
}
} else {
$site_logo = dw_focus_get_theme_option( 'dw_logo_image' );
}
?>
<?php if ( $site_logo ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-logo"><img src="<?php echo esc_url( $site_logo ); ?>" title="<?php bloginfo( 'name' ); ?>"></a>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<?php if ( is_active_sidebar( 'dw_focus_header' ) ) : ?>
<div id="header-widgets" class="col-md-8"><?php dynamic_sidebar( 'dw_focus_header' ); ?></div>
<?php endif; ?>
</div>
<?php
$navigation_class = 'navigation-wrap';
if ( dw_focus_get_theme_option( 'enable_menu' ) ) {
$navigation_class .= ' featured-articles-activated';
}
if ( is_active_sidebar( 'dw_focus_under_navigation' ) ) {
$navigation_class .= ' under-navigation-activated';
}
?>
<div class="<?php echo esc_attr( $navigation_class ); ?>">
<?php dw_focus_featured_articles(); ?>
<nav id="masthead" class="navbar navbar-default site-navigation" role="banner">
<div class="navbar-header">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<button class="navbar-toggle" data-toggle="collapse" data-target=".main-navigation"><i class="fa fa-bars"></i></button>
<?php endif; ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-brand navbar-brand visible-xs visible-sm">
<?php $site_logo = dw_focus_get_theme_option( 'dw_logo_image' ); ?>
<?php if ( $site_logo ) : ?>
<img src="<?php echo esc_url( $site_logo ); ?>" title="<?php bloginfo( 'name' ); ?>">
<?php else : ?>
<h1><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
</a>
<?php if ( is_active_sidebar( 'dw_focus_under_navigation' ) ) : ?>
<button class="search-toggle visible-xs visible-sm" data-toggle="collapse" data-target=".under-navigation"><i class="fa fa-search"></i></button>
<?php endif; ?>
</div>
<div id="site-navigation" class="collapse navbar-collapse main-navigation" role="navigation">
<?php if ( has_nav_menu( 'primary' ) ) : ?><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav navbar-nav navbar-left' ) ); ?><?php endif; ?>
<div class="hidden-xs hidden-sm"><?php dw_focus_social_links(); ?></div>
</div>
</nav>
<?php if ( is_active_sidebar( 'dw_focus_under_navigation' ) ) : ?>
<div class="under-navigation hidden-xs hidden-sm">
<div class="row">
<div class="col-md-9 hidden-xs hidden-sm"><?php dynamic_sidebar( 'dw_focus_under_navigation' ); ?></div>
<div class="col-md-3"><?php get_search_form(); ?></div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</header>
</div>
<div id="content" class="site-content">
- Finally, add the following code to the style.css file:
.navigation-wrap {
border-top: 2px solid #000;
}
.site-header {
border-bottom: none;
}
@media (min-width: 1200px) {
.site-header-inner-wrap {
position: relative;
width: 100%;
min-width: 1140px;
}
.site-header-inner-wrap-fixed {
position: fixed;
width: 1140px;
z-index: 9000;
top: -105px;
}
#page {
max-width: 1182px;
}
.site-header {
width: 100%;
}
}Hope this helps !
Hi Domanic thanks for the code , but i am having error on header.php file , Its return to white screen after added the cpde which is sent by you , I am using 1.7 version dw focus theme this is my existing header.php file code .
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<header id="masthead" class="site-header" role="banner">
<div class="container">
<div id="header">
<div class="row">
<div id="branding" class="span3 visible-desktop">
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
</div>
<?php if( is_active_sidebar( 'dw_focus_header_main' )
|| is_active_sidebar( 'dw_focus_header' ) ) { ?>
<div class="span9 newheader" style=" text-align: center; margin-top: 17px;">
<?php } ?>
<?php dynamic_sidebar('dw_focus_header_main'); ?>
</div>
<?php if( is_active_sidebar( 'dw_focus_header_main' )
|| is_active_sidebar( 'dw_focus_header' ) ) { ?>
<div id="sidebar-header" class="span12">
<?php dynamic_sidebar('dw_focus_header'); ?>
</div>
<?php } ?>
</div>
</div>
<?php
$dw_menu_post = dw_get_option('dw_menu_display_type');
if( !is_handheld() && $dw_menu_post != 'hide') :
$max_number_posts = dw_get_option('dw_menu_number_posts');
if( ! $max_number_posts ) {
$max_number_posts = 15;
}
if( $max_number_posts > 0 ) {
?>
<div class="btn-group top-news">
<?php dw_top15(); ?>
</div>
<?php
}
endif;
?>
<div class="wrap-navigation">
<nav id="site-navigation" class="main-navigation navbar" role="navigation">
<div class="navbar-inner">
<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="collapse-search hidden-desktop" data-target=".search-collapse" data-toggle="collapse" >
<i class="icon-search"></i>
</button>
<a class="small-logo hidden-desktop" rel="home" title="DW Focus" href="<?php echo esc_url( home_url( '/' ) ); ?>">DW Focus</a>
<?php
// Social links
$facebook = dw_get_option('dw_facebook');
$twitter = dw_get_option('dw_twitter');
$gplus = dw_get_option('dw_gplus');
$linkedin = dw_get_option('dw_linkedin');
$feedlink = dw_get_option('dw_feedlink', false);
$loginlink = dw_get_option('dw_loginlink', false);
?>
<ul class="social-links visible-desktop">
<?php if( $facebook ) { ?>
<li class="facebook"><a target="_blank" href="<?php echo $facebook; ?>" title="<?php _e('Facebook','dw-focus') ?>"><i class="icon-facebook"></i></a></li>
<?php } ?>
<?php if( $twitter ) { ?>
<li class="twitter"><a target="_blank" href="<?php echo $twitter; ?>" title="<?php _e('Twitter','dw-focus') ?>"><i class="icon-twitter"></i></a></li>
<?php } ?>
<?php if( $gplus ) { ?>
<li class="google-plus"><a target="_blank" href="<?php echo $gplus ?>" title="<?php _e('Google Plus','dw-focus') ?>"><i class="icon-google-plus"></i></a></li>
<?php } ?>
<?php if( $linkedin ) { ?>
<li class="linkedin"><a target="_blank" href="<?php echo $linkedin ?>" title="<?php _e('Linked in','dw-focus') ?>"><i class="icon-linkedin"></i></a></li>
<?php } ?>
<?php if( $feedlink ) { ?>
<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Rss','dw-focus') ?>"><i class="icon-rss"></i></a></li>
<?php } ?>
<?php if( $loginlink ) { ?>
<li class="login"><a href="<?php echo wp_login_url( get_permalink() ); ?>" title="<?php _e('Login','dw-focus') ?>"><i class="icon-user"></i></a>
<?php } ?>
</ul><!-- End social links -->
<div class="search-collapse collapse">
<?php get_search_form( $echo = true ); ?>
</div>
<div class="nav-collapse collapse">
<?php
$params = array(
'theme_location' => 'primary',
'container' => '',
'menu_class' => 'nav',
'fallback_cb' => 'link_to_menu_editor'
);
if (!is_handheld()) {
$params['walker'] = new DW_Mega_Walker();
}else{
$params['walker'] = new DW_Mega_Walker_Mobile();
}
wp_nav_menu($params);
?>
</div>
</div>
</nav>
<div id="under-navigation" class="clearfix under-navigation">
<div class="row-fluid">
<?php $offset = ''; ?>
<?php if( is_active_sidebar( 'dw_focus_under_navigation' ) ) { ?>
<!-- Under navigation positions ( breadcrum, twitter widgets) -->
<div class="span9">
<?php dynamic_sidebar('dw_focus_under_navigation'); ?>
</div>
<?php } else { $offset = 'offset9'; }?>
<div class="span3 <?php echo $offset; ?>"><?php get_search_form(); ?></div>
</div>
</div>
</div>
</div>
</header> <!-- End header -->
<div id="main">
<div class="container">
<div class="row">
dominicIf you’re using 1.0.7 version, you can add the following code to the header.php file:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<header id="masthead" class="site-header" role="banner">
<div class="container">
<div id="header">
<div class="site-header-inner-wrap">
<div class="row">
<div id="branding" class="span3 visible-desktop">
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
</div>
<?php if( is_active_sidebar( 'dw_focus_header' ) ) { ?>
<div id="sidebar-header" class="span9">
<?php dynamic_sidebar('dw_focus_header'); ?>
</div>
<?php } ?>
</div>
<?php
$dw_menu_post = dw_get_option('dw_menu_display_type');
if( !is_handheld() && $dw_menu_post != 'hide') :
$max_number_posts = dw_get_option('dw_menu_number_posts');
if( ! $max_number_posts ) {
$max_number_posts = 15;
}
if( $max_number_posts > 0 ) {
?>
<div class="btn-group top-news">
<?php dw_top15(); ?>
</div>
<?php
}
endif;
?>
<div class="wrap-navigation">
<nav id="site-navigation" class="main-navigation navbar" role="navigation">
<div class="navbar-inner">
<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="collapse-search hidden-desktop" data-target=".search-collapse" data-toggle="collapse" >
<i class="icon-search"></i>
</button>
<a class="small-logo hidden-desktop" rel="home" title="DW Focus" href="<?php echo esc_url( home_url( '/' ) ); ?>">DW Focus</a>
<?php
// Social links
$facebook = dw_get_option('dw_facebook');
$twitter = dw_get_option('dw_twitter');
$gplus = dw_get_option('dw_gplus');
$linkedin = dw_get_option('dw_linkedin');
$feedlink = dw_get_option('dw_feedlink', false);
$loginlink = dw_get_option('dw_loginlink', false);
?>
<ul class="social-links visible-desktop">
<?php if( $facebook ) { ?>
<li class="facebook"><a target="_blank" href="<?php echo $facebook; ?>" title="<?php _e('Facebook','dw-focus') ?>"><i class="icon-facebook"></i></a></li>
<?php } ?>
<?php if( $twitter ) { ?>
<li class="twitter"><a target="_blank" href="<?php echo $twitter; ?>" title="<?php _e('Twitter','dw-focus') ?>"><i class="icon-twitter"></i></a></li>
<?php } ?>
<?php if( $gplus ) { ?>
<li class="google-plus"><a target="_blank" href="<?php echo $gplus ?>" title="<?php _e('Google Plus','dw-focus') ?>"><i class="icon-google-plus"></i></a></li>
<?php } ?>
<?php if( $linkedin ) { ?>
<li class="linkedin"><a target="_blank" href="<?php echo $linkedin ?>" title="<?php _e('Linked in','dw-focus') ?>"><i class="icon-linkedin"></i></a></li>
<?php } ?>
<?php if( $feedlink ) { ?>
<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Rss','dw-focus') ?>"><i class="icon-rss"></i></a></li>
<?php } ?>
<?php if( $loginlink ) { ?>
<li class="login"><a href="<?php echo wp_login_url( get_permalink() ); ?>" title="<?php _e('Login','dw-focus') ?>"><i class="icon-user"></i></a>
<?php } ?>
</ul><!-- End social links -->
<div class="search-collapse collapse">
<?php get_search_form( $echo = true ); ?>
</div>
<div class="nav-collapse collapse">
<?php
$params = array(
'theme_location' => 'primary',
'container' => '',
'menu_class' => 'nav',
'fallback_cb' => 'link_to_menu_editor'
);
if (!is_handheld()) {
$params['walker'] = new DW_Mega_Walker();
}else{
$params['walker'] = new DW_Mega_Walker_Mobile();
}
wp_nav_menu($params);
?>
</div>
</div>
</nav>
<div id="under-navigation" class="clearfix under-navigation">
<div class="row-fluid">
<?php $offset = ''; ?>
<?php if( is_active_sidebar( 'dw_focus_under_navigation' ) ) { ?>
<!-- Under navigation positions ( breadcrum, twitter widgets) -->
<div class="span9">
<?php dynamic_sidebar('dw_focus_under_navigation'); ?>
</div>
<?php } else { $offset = 'offset9'; }?>
<div class="span3 <?php echo $offset; ?>"><?php get_search_form(); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header> <!-- End header -->
<div id="main">
<div class="container">
<div class="row">Then add the following code to the style.css file:
@media (min-width: 1200px) {
.site-header-inner-wrap {
position: relative;
width: 100%;
min-width: 1040px;
}
.site-header-inner-wrap-fixed {
position: fixed;
width: 1040px;
z-index: 9000;
top: -90px;
}
#page {
max-width: 1182px;
}
#under-navigation {
background-color: #fff;
}
.navbar {
background-color: #fff;
}
}If you still face there issue, you can send me username & password of your site (via private answer) I will help you resolve it.
Regards,
lisageniThanks works awsome.
Please login or Register to submit your answer