carriage return in the smugmug navbar

Etienne

Hi,

is it possible to add a carriage return in the label of the smugmug navbar ?
for instance adding
or \n between two words ?
I tried

denisegoldberg

What are you trying to do?

If you want the navbar to span two lines always, have you tried using two menu content blocks, one above the other?
If you're trying to split a single navbar entry, I don't know of a way to mange that. Perhaps someone else has an idea.

Etienne

only split a single entry because the label is too long

Hikin' Mike

I don't think you can.

Jtring

Is your menu horizontal or vertical? If vertical, you can force the words to wrap by setting the margins sufficiently wide. Perhaps that would give the effect you desire. Not sure what you can do with a horizontal menu. Could you post a link to your site?

Etienne

horizontal menu. I can change the width on the specific entry so the label is on 2 lines :

.sm-page-widget-nav-toplink:nth-child(x) --> width y

It's what I wanted .

Thanks

Hikin' Mike

@Etienne said:
horizontal menu. I can change the width on the specific entry so the label is on 2 lines :

.sm-page-widget-nav-toplink:nth-child(x) --> width y

It's what I wanted .

Thanks

That was my only suggestion. Force a specific width. for a specific item.

pilotdave

@Etienne said:
Hi,

is it possible to add a carriage return in the label of the smugmug navbar ?
for instance adding
or \n between two words ?
I tried

I can't test this right now, but try the advice here, if it's applicable to the problem. Not sure...

https://blog.escapecreative.com/add-line-breaks-css-generated-content/

Dave

Hikin' Mike

@pilotdave said:
I can't test this right now, but try the advice here, if it's applicable to the problem. Not sure...

https://blog.escapecreative.com/add-line-breaks-css-generated-content/

Dave

Good find Dave! I tested it and it works, with some changes.

@Etienne
Add this to your theme's custom CSS:

.sm-page-widget-nav-toplink:nth-child(3) > a:after {
    display: block;
    white-space: pre;
    content: "Line 2";
    }

You will have to go into your Menu settings and remove the "second line" from your title i.e if your menu title was 'TARIFS ET PLANNING' in the example you PM'd me, you will need to remove at least 'ET PLANNING'. If you don't do that you will duplicates.

Now the :nth-child(3) corresponds to the number of menu items. In your case, I think 3 was correct.

If you want three lines add \a after the second line: i.e. content: "Line 2 \a Line 3";.

Etienne

very interesting tips it runs
Thanks