Remove sticky behavior from top navigation on twenty fourteen theme?

Question

Remove sticky behavior from top navigation on twenty fourteen theme?

cmsdeployed

2018年5月4日 06:12

In wordpress theme twentyfourteen, I am wondering how to remove the sticky behavior of the top navigation with a 100% width header background image like this site?

I would love to have a top image with full width and a max-height with the navigation just placed under it, but the navigation sticks to the top of the window in the browser when you scroll down.

I ended up using the following .js with twentythirteen child theme

//$(document).ready(function() {
jQuery().ready(function($) {
var stickyNavTop = $('.navbar').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop  stickyNavTop) { 
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

and added

 .sticky { position: fixed; z-index: 100; ... }

Thanks to a post found in here.

I could have apply the same to the twentyfourteen, but it was tricky and I had no time to waste.

Topic theme-twenty-fourteen headers css Wordpress

Category Web

Swagatam Majumdar · Accepted Answer · 2018年5月4日 06:12

According to me position: unset is the best and the cleanest option,

Explanation: I have a Genesis theme running in my website. I liked and uploaded its new version which looked white and clean, but I did not like the sticky or fixed header bar feature of the theme since it was slightly increasing the load time of the page.

I decided to turn off the sticky behavior. I right clicked on the page, investigated the class name of the header bar, checked the CSS option and found it to be having the following details:

.site-header {
position: fixed;

}

I copied the entire section, and put it in my theme customization box with the the following changes:

.site-header {
position: unset;

}

And the issue was instantly solved and I could achieve the required results.

I selected "unset" because it simply reverts the situation to the standard or the default version of the theme, and removes any modifications involved with the code.

You can see the the debugging screenshot here

Nicholas Petersen · Accepted Answer · 2015年1月21日 05:35

Working off of Sepster's answer, the 2014 theme I am working with needed this further addition (here's the full solution that worked for me):

.masthead-fixed .site-header {
  position: relative;
}

@media screen and (min-width: 783px) {
    .admin-bar.masthead-fixed .site-header {
        top:inherit;
    }
}

Sepster · Accepted Answer · 2014年8月10日 16:35

In the Twenty Fourteen theme, the masthead-fixed class gets added to the <body> element.

The following CSS (line 3362) is actuated as a result:

@media screen and (min-width: 783px)
.masthead-fixed .site-header {
  position: fixed;
  top: 0;
}

You can apply the following CSS from your child theme to override this:

.masthead-fixed .site-header {
  position: relative;
}

Pieter Goosen · Accepted Answer · 2014年7月17日 05:51

Before I answer this question, I would believe that you have already created a child theme. Reason: You should never make any changes to a theme/plugin that you are not the author of. This includes core files

With that sorted, the behavior of the navigation menu in purely controlled by js,

  77          /*
  78           * Fixed header for large screen.
  79           * If the header becomes more than 48px tall, unfix the header.
  80           *
  81           * The callback on the scroll event is only added if there is a header
  82           * image and we are not on mobile.
  83           */
  84          if ( _window.width() > 781 ) {
  85              var mastheadHeight = $( '#masthead' ).height(),
  86                  toolbarOffset, mastheadOffset;
  87  
  88              if ( mastheadHeight > 48 ) {
  89                  body.removeClass( 'masthead-fixed' );
  90              }
  91  
  92              if ( body.is( '.header-image' ) ) {
  93                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  94                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  95  
  96                  _window.on( 'scroll.twentyfourteen', function() {
  97                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                          body.addClass( 'masthead-fixed' );
  99                      } else {
 100                          body.removeClass( 'masthead-fixed' );
 101                      }
 102                  } );
 103              }
 104          }

which you can find in functions.js in the js folder

To remove this functionality, (all in your child theme) you'll need to dequeue (using wp_dequeue_script()) the original functions.js, copy functions.js to your child theme and remove the mentioned lines and enqueue (using wp_enqueue_script()) the modified js. This will be done inside a custom function that will be hooked to the wp_enqueue_scripts hook

In code and in practice

Create a file called js in your child theme's root folder.
Copy functions.js and paste it into your js folder in your child theme
Open functions.js and remove the line I've mentioned above
Safe the functions.js

Now, open your child theme's functions.php, and add the following code in there. This will dequeue the parent script and enqueue your new modified script

function enqueue_child_functions_js() {

    wp_dequeue_script( 'twentyfourteen-script' ); //dequeue the parent script
    wp_enqueue_script( my-child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140717', true ); //enqueue new modified script

}

add_action( 'wp_enqueue_scripts', 'enqueue_child_functions_js', 999 );

Remove sticky behavior from top navigation on twenty fourteen theme?

About