1

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.

Improve this question
3
  • This is a question better asked using the CSS tag at Stackoverflow. stackoverflow.com/questions/tagged/css
    – Brad Dalton
    Commented Jul 16, 2014 at 22:27
  • @BradDalton this isn't a css issue as you might think. And bundled theme related questions are on topic
    – Pieter Goosen
    Commented Jul 17, 2014 at 5:24
  • I've edited your question so that it makes better sense. I hope this is what you had in mind when you wrote the question. If my edit changed the real question and the scope of it, please feel free to roll back my changes. I've answered your question according to my understanding and edit
    – Pieter Goosen
    Commented Jul 17, 2014 at 6:00

4 Answers 4

Reset to default
2

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 );
Improve this answer
3
  • Sorry this is not what I was looking for. I wanted to build a navigation menu similar to the one on the sample page. A menu that becomes sticky after you scroll pass a top full background image. I was able to do it with a twentythirteen instead. And yes I am using a child theme.
    – cmsdeployed
    Commented Jul 17, 2014 at 10:08
  • It shouldn't be to tricky though to accomplish this. As said, the complete behavior of the nav menu is controlled by those few lines of js in my answer. I'm not currently at home, so I can't do any testing, but my thought on this would be to assign a body class of some kind and then tweaking the js accordingly
    – Pieter Goosen
    Commented Jul 17, 2014 at 10:18
  • Thanks for your help. Your code will definitely come handy on one of my project.
    – cmsdeployed
    Commented Jul 17, 2014 at 10:29
1

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;
}
Improve this answer
2
  • Thanks I figured it out. Now I am looking for a way to have the navigation sitting on the bottom of the screen when the page first load like in knapsackcreative.com
    – cmsdeployed
    Commented Aug 15, 2014 at 21:40
  • Beautiful! I appreciate the other answer which is useful for other cases, but this one rocks as it shows a beautiful and SIMPLE design in the theme that allows it to be effortlessly overridden.
    – Nicholas Petersen
    Commented Jan 21, 2015 at 4:20
1

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;
    }
}
Improve this answer
2
  • Great addition. Thanks for posting additional info on this :-)
    – Pieter Goosen
    Commented Jan 21, 2015 at 5:46
  • 1
    Thanks. I'm afraid I may have some further problems now still though (with featured content padding stuff). That might be easily fixed as well, but we'll see when I can get back to it hopefully soon. One thing is evident though: if it were possible to simply erase that extra css class, that would take away all the problems. One can test this, just erase it live in the browser inspector. So a jquery solution might be another route to add to all 3 of our current solutions...
    – Nicholas Petersen
    Commented Jan 21, 2015 at 7:06
-1

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

Improve this answer
1
  • Please edit your answer, and add an explanation: why could that solve the problem and how is it applied?
    – fuxia ♦
    Commented May 3, 2018 at 5:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.