Welcome to the LimeSurvey Community Forum

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

Change height of navbar

  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago - 6 years 4 months ago #160909 by Robert1973
Change height of navbar was created by Robert1973
Hi there,

I would like to change the height (make it less high) of the top navbar of my survey. I'm not that familiar with the code, so I'm googling and doing attempts based on trial & error. But, without much luck. Does anyone know how to do this?

Below the navbar, I'm displaying an image as part of the question, but there's (too much) whitespace between the navbar and the image. Is there a way to change this?

Many thanks in advance, kind regards,
Robert Vloet

(Limesurvey Version 2.50+ Build 160219)
Last edit: 6 years 4 months ago by Robert1973.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago #160912 by tpartner
Replied by tpartner on topic Change height of navbar
What template are you using?

Can you provide a screenshot of the space you want removed and a link to a test survey?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 4 months ago #160925 by LouisGac
Replied by LouisGac on topic Change height of navbar
Hi Robert,

first you should update to the latest version, we fixed some security issues since 160219.
Then, templates are using bootstrap, so your question is how to change the height of the bootstrap navbar.
Here the first google links for "change the height of the bootstrap navbar":
bootstrapious.com/p/how-to-change-bootstrap-navbar-height
stackoverflow.com/questions/18599778/dec...bootstrap-3-0-navbar
stackoverflow.com/questions/19837444/cus...ht-bootstraps-navbar
The topic has been locked.
More
6 years 4 months ago #160926 by tomtom
Replied by tomtom on topic Change height of navbar
Hi Tony, I've got the same question here, and I am using the default template, flat_and_modern.css. I have tried to append "height: 30px;" to ".navbar-default {}", but nothing change. Thank you.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago #160927 by Joffm
Replied by Joffm on topic Change height of navbar
Hi, tomtom,

in the first link Luis provided is everything you need.


I just changed the min-height and height to the desired value just to see that it works.

Best regards
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Robert1973
The topic has been locked.
  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago #160950 by Robert1973
Replied by Robert1973 on topic Change height of navbar

tpartner wrote: What template are you using?

Can you provide a screenshot of the space you want removed and a link to a test survey?



Hi Tony, thanks for your quick reply.

I'm using the Default template with several adjustments (practically all documented).
I've added Louis'/Joffm's code, which helps indeed to make the navbar smaller, however the white space increases. In other words : the image starts at the same position.

The topic has been locked.
  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago #160951 by Robert1973
Replied by Robert1973 on topic Change height of navbar

LouisGac wrote: Hi Robert,

first you should update to the latest version, we fixed some security issues since 160219.
Then, templates are using bootstrap, so your question is how to change the height of the bootstrap navbar.
Here the first google links for "change the height of the bootstrap navbar":
bootstrapious.com/p/how-to-change-bootstrap-navbar-height
stackoverflow.com/questions/18599778/dec...bootstrap-3-0-navbar
stackoverflow.com/questions/19837444/cus...ht-bootstraps-navbar


Hi Louis, thanks for your reply. I've added the code from the first link to my template.css, and that works. So that's great :-)
Only problem that needs to be fixed is the white space between navbar and image.

PS the other 2 links are a little bit beyond my knowledge to fully comprehend.
The topic has been locked.
  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago #160952 by Robert1973
Replied by Robert1973 on topic Change height of navbar

Joffm wrote: Hi, tomtom,

in the first link Luis provided is everything you need.



I just changed the min-height and height to the desired value just to see that it works.

Best regards
Joffm


Hi Joffm, thanks for this and pointing me in the right direction! :-)
The topic has been locked.
  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago #160954 by Robert1973
Replied by Robert1973 on topic Change height of navbar

tpartner wrote: a link to a test survey?



Forgot the link :

37.252.121.232/bewustzijnmeter/index.php...49/newtest/Y/lang/nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago - 6 years 4 months ago #160955 by tpartner
Replied by tpartner on topic Change height of navbar
To avoid messing with the whole template, I would simply give the image an inline style to push it up.

Code:
<img alt="" src="/bewustzijnmeter/kaarten/TFH-IC 1.1 Rust 3.jpg" style="width: 100%; margin-top: -50px;" />

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 4 months ago by tpartner.
The following user(s) said Thank You: LouisGac, Robert1973
The topic has been locked.
  • Robert1973
  • Robert1973's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 4 months ago - 6 years 4 months ago #160963 by Robert1973
Replied by Robert1973 on topic Change height of navbar

tpartner wrote: To avoid messing with the whole template, I would simply give the image an inline style to push it up.

Code:
<img alt="" src="/bewustzijnmeter/kaarten/TFH-IC 1.1 Rust 3.jpg" style="width: 100%; margin-top: -50px;" />


This works very well, thank you Tony!

I now use something like :
<img alt="" src="/bewustzijnmeter/kaarten/TFH-IC 4.3 Voelen 3.jpg" style="height: 80vh; max-width: 100%; margin-top: -60px; float: left;" /></div>

The result is an image on the left side and my question right next to it. However, the answers are below my image and would like to have them next to the image. See enclosed picture.

Do you know how to do this?
Last edit: 6 years 4 months ago by Robert1973.
The topic has been locked.
More
6 years 4 months ago #160965 by tomtom
Replied by tomtom on topic Change height of navbar
Great Joffm!

My changes:

Org:
.navbar-brand {
float: left;
padding: 19.5px 15px;
font-size: 20px;
line-height: 18px;
height: 18px;
}

New:
.navbar-brand {
float: left;
padding: 5px 10px;
font-size: 16px;
height: 15px;
}
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose