This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 11 - Pages: 1 - Last Post: 12-Oct-2017 20:11 Last Post By: Laza
MarkusD

Posts: 490
Registered: 13-Apr-2006
Reduce the height of Top navigation lines
Posted: 11-Oct-2017 19:03
 
  Click to reply to this thread Reply
Hi,

I do use albums with a lot of folders and the height of the "Top navigation" bar gets extremely high. Is there a way to reduce the height of one line? See attached scree shot. I attached also the project file.

TIA, Markus
jGromit

Posts: 33,151
Registered: 31-Jan-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 21:47   in response to: MarkusD in response to: MarkusD
Helpful
  Click to reply to this thread Reply
Not quite sure I understand. Do you want to show only the first few folders, instead of all of them? Even if you could limit it to one line, that would produce a different number of folders for different site visitors, since the layout is responsive to the display size.

I think I would not show the top navigation at all - with that many folders, is it reallly doing any good, or is it just visual clutter? And if you're going to show only a few of them, why bother?

Or maybe you could add another layer of folders, perhaps organizing things by year. Then the top navigation might show just 2017 2016 2015 and so on. Once the visitor goes to, say, 2016, he would then see all of the individual destinations for 2016 in the top navigation.
MarkusD

Posts: 490
Registered: 13-Apr-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 22:26   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Not quite sure I understand. Do you want to show only the first few folders, instead of all of them?
I would like to show them all.

Or maybe you could add another layer of folders, perhaps organizing things by year. Then the top navigation might show just 2017 2016 2015 and so on. Once the visitor goes to, say, 2016, he would then see all of the individual destinations for 2016 in the top navigation.
Ok, that would be a solution.

Nevertheless, IMO the height of one line is much to high. Reducing the height of such a navigation line to 50% of the actual height would just be enough. Instead of reorganizing my album I would like to try to tinker with the height of such a line in the skin code. Any idea where I can alter the height?

TIA, Markus
jGromit

Posts: 33,151
Registered: 31-Jan-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 22:48   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Ah, I see. Yes, the lines are rather tall. You can tinker with the CSS for them. Head for Tiger > Site > Custom Code > CSS and try something like this:
.top-bar .menu > li > a {line-height: 1; padding: 0.4rem;}
BTW, Tiger's top navigation includes drop-down menus, so if you had a 2016 folder, for example, the top navigation would show a little down-arrow next to 2016, and clicking that would show the 2016 subfolders, arrayed vertically. Take a look at the attached screenshots, where Folder Two has a couple of subfolders. I really think that approach would clean up your top-level page a lot!

Edited by: jGromit on 11-Oct-2017 17:56, to fix typo in the CSS.
MarkusD

Posts: 490
Registered: 13-Apr-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:00   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Ah, I see. Yes, the lines are rather tall. You can tinker with the CSS for them. Head for Tiger > Site > Custom Code > CSS and try something like this:
.top bar .menu > li > a {line-height: 1; padding: 0.4rem;}
I already have one line of code, so I just added your line. It now looks:

.myComments {font-family: "Lucida Console", "Courier New", sans-serif;}
.top bar .menu > li > a {line-height: 1; padding: 0.4rem;}


Is that Ok, to just add another line? I don't know the syntax off CSS.

But the height of the lines is still the same. I assume I have to change line-height value. I also tried:

.top bar .menu > li > a {line-height: 0.5; padding: 0.4rem;}

No visible change in the height.

BTW, Tiger's top navigation includes drop-down menus, so if you had a 2016 folder, for example, the top navigation would show a little down-arrow next to 2016, and clicking that would show the 2016 subfolders, arrayed vertically. Take a look at the attached screenshots, where Folder Two has a couple of subfolders. I really think that approach would clean up your top-level page a lot!
Yes, I know the subfolder-scheme, I use it for example here. But this video album with the many folders I would like to keep organized as it is right now.
jGromit

Posts: 33,151
Registered: 31-Jan-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:10   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
MarkusD wrote:
Is that Ok, to just add another line? I don't know the syntax off CSS.

Yes, that's fine. But isn't it about time you learned some CSS? It's not difficult.

But the height of the lines is still the same.

You need to refresh your browser cache. I have tested this, and it works.

I also tried:

.top bar .menu > li > a {line-height: 0.5; padding: 0.4rem;}

No visible change in the height.

Don't do that!! You'll end up with overlapping text. Anything less than line-height: 1 is just asking for trouble.
MarkusD

Posts: 490
Registered: 13-Apr-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:21   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
You need to refresh your browser cache. I have tested this, and it works.
I did that several times, I also restarted JA and FF. I saw it in your screen shots, that it did work.

After changing the values in the CSS field I did a <F9>, no change in the line height.

Don't do that!! You'll end up with overlapping text. Anything less than line-height: 1 is just asking for trouble.
Upps, so I should go for:

.top bar .menu > li > a {line-height: 2; padding: 0.4rem;}

I tried that, with no change. I even tried 20, no change.

Maybe its too late. I'll give it another try tomorrow. Thanks so far.
jGromit

Posts: 33,151
Registered: 31-Jan-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:26   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
F9 doesn't refresh your browser cache. While viewing the page, hit CTRL-F5 (on a Mac, CMD-R).

Don't use line-height: 2 - that's the Tiger default value, and it tells the browser to make the line twice as tall as it needs to be in order to show the text. In short, that's precisely what you're trying to change!
MarkusD

Posts: 490
Registered: 13-Apr-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:36   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
F9 doesn't refresh your browser cache.
Sorry, I tried to say, that I made the album with <F9> in JA.

While viewing the page, hit CTRL-F5 (on a Mac, CMD-R).
I did that in FF.

Don't use line-height: 2 - that's the Tiger default value, and it tells the browser to make the line twice as tall as it needs to be in order to show the text. In short, that's precisely what you're trying to change!

I tried:
.top bar .menu > li > a {line-height: 0.6; padding: 0.4rem;}

Still no change. This time I tried it with the sample album. See screen shots.

I use JA 14.1.10 and Tiger Version 1.4.
jGromit

Posts: 33,151
Registered: 31-Jan-2006
Re: Reduce the height of Top navigation lines
Posted: 11-Oct-2017 23:55   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Ah, sorry! A minor typo - the CSS selector is .top-bar, not .top bar. So:
.top-bar .menu > li > a {line-height: 1; padding: 0.4rem;}
If you knew CSS, you'd have known exactly what the problem was. ;)
MarkusD

Posts: 490
Registered: 13-Apr-2006
Re: Reduce the height of Top navigation lines
Posted: 12-Oct-2017 18:41   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Ah, sorry! A minor typo - the CSS selector is .top-bar, not .top bar. So:
.top-bar .menu > li > a {line-height: 1; padding: 0.4rem;}
Ahh, yeah, that's much better. Thanks a lot.

If you knew CSS, you'd have known exactly what the problem was. ;)
So, help me so I can help myself in the future. ;-) Where do I find information about the elements which can be altered with CSS? TIA
Laza

Posts: 9,465
Registered: 6-Sep-2005
Re: Reduce the height of Top navigation lines
Posted: 12-Oct-2017 20:11   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Right-click the element on the page and select "Inspect". On the right (Styles tab) you'll find the hook, e.g. ".top-bar .menu > li > a".
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums