Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

removing the navbar (using vanilla theme, extended)

  • zaorivee
  • zaorivee's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 3 weeks ago #196207 by zaorivee
I am trying to get rid of the navbar. I have extended the vanilla theme. Other than this experimentation, I have made very few changes, just to remove presentation of the survey title in various places.

I edited nav_bar.twig and commented out the div for the element with aSurveyInfo.class.navbarbrand. This successfully removes the navbar content from the survey, but still leaves a gap at the top of the survey caused by padding-top style on the body element.

In an attempt to handle that issue, I edited custom.css and added the following:

Code:
body { padding-top: 0px; }

This successfully adjusts the body style, but something else is adding style="padding-top: 49px;" to the body element, and I can't figure out the culprit.

This is what my body element looks like rendered, after making those changes:

Code:
<body class=" extends_vanilla vanilla font-noto lang-en " style="padding-top: 49px;">

I have tried several workarounds, none of which work completely.

I tried a hack using javascript, by editing custom.js and adding:

Code:
$(document).ready(function(){
    $('body').css('padding-top', '0px');
});

This works in terms of the final page rendered, but results in a visible jump as the content is loaded and then shifted up. This happens for every page in the survey using this method.

I tried deleting completely the {% block nav_bar %} ... {% endblock %} section in layout_global.twig but this results in a reference error (presumably some code is trying to set a property on something created by the code inserted by the nav_bar template block.

Any suggestions? Ideally I'd like to do this the cleanest way using the template editor or other configuration, but suggestions for any workarounds that are functional would be appreciated as well.
The topic has been locked.
  • zaorivee
  • zaorivee's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 3 weeks ago #196208 by zaorivee
(I am using version 3.21.3+191219.)
The topic has been locked.
  • zaorivee
  • zaorivee's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 3 weeks ago #196209 by zaorivee
With a bit more exploration, I figured out a functional workaround.

I edited theme.js and changed fixBodyPadding() to be as follows:

Code:
var fixBodyPadding = function fixBodyPadding(){
    $('body').css('padding-top', '0px');
};

This code was the culprit:

Code:
$('body').css('padding-top', Math.round($('.navbar-fixed-top').height()) +'px');

This change works, but editing the theme.js file seems like a bit of a hack. It looks like the fixBodyPadding() function is called in many places. Maybe I should redefine it in custom.js instead? I am unsure about the cleanest way to modify fixBodyPadding(), from the perspective of maintainability.

I would welcome any suggestions.

In any case, maybe this workaround will be useful to others as is.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 3 weeks ago #196247 by DenisChenu
Personnaly i think vanilla is too big ... and all of this must be removed to extended theme only ...

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose