Topic Closed
annieone
14 Posts

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!!

3 years ago#10799

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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';

 

Edited: 3 years ago#10800

annieone
14 Posts

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?

3 years ago#10801

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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.

 

3 years ago#10802

annieone
14 Posts

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…

3 years ago#10804

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

$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)

Edited: 3 years ago#10805

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register