- Posts: 7
- Thank you received: 1
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
- Topic Author
- Offline
- New Member
Less
More
4 years 3 weeks ago #196207
by zaorivee
removing the navbar (using vanilla theme, extended) was created 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:
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:
I have tried several workarounds, none of which work completely.
I tried a hack using javascript, by editing custom.js and adding:
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.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 1
4 years 3 weeks ago #196208
by zaorivee
Replied by zaorivee on topic removing the navbar (using vanilla theme, extended)
(I am using version 3.21.3+191219.)
The topic has been locked.
- zaorivee
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 1
4 years 3 weeks ago #196209
by zaorivee
Replied by zaorivee on topic removing the navbar (using vanilla theme, extended)
With a bit more exploration, I figured out a functional workaround.
I edited theme.js and changed fixBodyPadding() to be as follows:
This code was the culprit:
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.
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 13637
- Thank you received: 2491
4 years 3 weeks ago #196247
by DenisChenu
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.
Replied by DenisChenu on topic removing the navbar (using vanilla theme, extended)
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.