hi,

i am down on my knees trying to add a tiny script for having the main navigation bar shrinking when scrolling down (using Bootswatch_Sccs/Flatly) .

anyone here who managed to solve this by plugin maybe?

or can anyone tell me where i could put the tiny script??

would be like this (only maybe not for header but for .navbar-fixed-top instead):

// shrink Header on on scroll down $(document).scroll(function() { if ($(this).scrollTop() > 10) { //Adjust 150 $('header').addClass('shrinked'); } else { $('header').removeClass('shrinked'); } });

thank you in advance!!

Open [typesetter installation direcory]/themes/Bootswatch_Scss/template.php and add

$page->jQueryCode .= "
$(document).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $('.navbar-fixed-top').addClass('shrinked');
  } else {
    $('.navbar-fixed-top').removeClass('shrinked');
  }
});
";

at line 6 (after the line include_once($path);)

You will also need to add the required css for the shrinked class, e.g. if it's in
[typesetter installation direcory]/themes/Bootswatch_Scss/shrink.css

$page->css_user[] = dirname($page->theme_path) . '/shrink.css';

thank you so much for fast reply! i tried but when scrolling no class is added :(

also i think i have to add sth in script to move the element 'container main' as well, right?

Have you changed the navbar to be navbar-fixed-top?
With Bootswatch_Scss, the navbar is navbar-static-top by default.

also i think i have to add sth in script to move the element 'container main' as well, right?

With a fixed navbar, I normally use padding-top: $navbar-height;  for the body element.
If the navbar's height changes, this padding should change as well.

hi, it's working now when scrolling :))) thank you!! i had an issue first maybe caused by order of rules.

only padding-top: $navbar-height; for body is not working yet – is this an existing variable? or maybe it is overwritten? i put my own scss in /thirdparty because i didn't know otherwise…

$navbar-height is a Bootstrap 3 Scss variable (with LESS it's @navbar-height)

It is only available in the course of theme/layout css compilation to all involved stylesheets (bootstrap's scss, variables.scss, style.scss, anything entered in Layout Editor's css area, and possible @imported stylesheets/partials)

It is NOT available in other stylesheets such as ones that come with plugins or are linked separately in template.php (even if they are scss, they trigger separate compilation processes)

(And: Scss/LESS varibles are NOT available in PHP or JavaScript)