Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-08-06 03:02:28

grover_c
Member
Registered: 2016-12-10
Posts: 64

drop down menu items with a line break?

Hi All,

Is it possible to use a <br /> or something similar in drop down menu item?  Currently it seems to ignore the break and anything that comes after it.


Thanks

Offline

#2 2017-08-06 06:50:11

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,240
Website

Re: drop down menu items with a line break?

It works for me. I don't know if it's the correct thing to do, but it works.
See: http://pangolin.barbeephoto.com/ and hover over the "Layouts" menu item. One the the sub-menu items, "Top pallet image logo as background image" has been split up with a <br/>.  <br> also works.

Might help if you posted an example if it not working.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2017-08-13 23:54:12

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

Thanks, Rod.  I'm just getting back to this now. My html source code seems correct so I suspect it's something in my custom css file.  FYI, my Tray Column width(s) is 240px, Widgets Margin-top is 18px and Widgets Margin-bottom is 72px.  Please let me know what you think.

Offline

#4 2017-08-14 00:02:44

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

A couple of more things.  I should have said that I haven't yet upgraded to 1.2.

Also, when I inspect the item I see the following info for <ul class="sub-menu">

line-height: 24px;
     body 1.5rem         resource.php:479

Any thoughts?

Offline

#5 2017-08-14 01:25:24

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 717
Website

Re: drop down menu items with a line break?

grover_c wrote:

A couple of more things.  I should have said that I haven't yet upgraded to 1.2.

Please upgrade! 1.2 introduced Pangolin based modules, but all previously designed pages and galleries will continue to work using the okapi framework. So there is nothing to worry about. But it makes it easier to get help.


Daniel Leu | Photography   
DanielLeu.com

Just a user who loves to dive into techie stuff... and sometimes gets into trouble for that.

Offline

#6 2017-08-14 08:01:50

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

OK.  I've updated to 1.2.2 and have the same problem.  Any ideas would be appreciated.

Thank you

Offline

#7 2017-08-14 09:52:13

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 717
Website

Re: drop down menu items with a line break?

A link might be helpful!


Daniel Leu | Photography   
DanielLeu.com

Just a user who loves to dive into techie stuff... and sometimes gets into trouble for that.

Offline

#8 2017-08-14 23:37:39

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

My webiste is www.bretculp.com.  Under "Portfolios" is "Slán Abhaile  – IRELAND" There is a line break under which it should say "(Safe Home)"

The html code seems correct, see below.  I've also tried it with <br />

<li class="menu-item"><a href="/gallery/020-ireland-photo-gallery/">Slán Abhaile  – IRELAND<br>(Safe Home)</a></li>

Thanks

Last edited by grover_c (2017-08-14 23:38:06)

Offline

#9 2017-08-15 01:51:24

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 717
Website

Re: drop down menu items with a line break?

I played a bit with the css inspector. To get the two lines, first, I think, you need to change block to inline-block:

nav li > a, nav li > span {
    display: inline-block;}

Next, the line height needs to be adjusted

nav a, nav span {
    height: 44px;
    line-height: 44px;
}

If the line-height is identical to the item height, you can't get two lines to show.... But this change should only target your 2-line menu items.

Oh, on mobile menu, your 'new' doesn't show up, neither does Ireland. So either you make your menu wider or shorten the length of menu items.

And I would try to not to use so many !importants in your css file. It is better to find the correct selector to overwrite the default assignment. But yeah, that's not always easy to do nor possible.

Just my 2 cents.


Daniel Leu | Photography   
DanielLeu.com

Just a user who loves to dive into techie stuff... and sometimes gets into trouble for that.

Offline

#10 2017-08-15 02:49:44

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

Thanks a lot.  I'll give it a try. 

I know about all of the !importants and will try to minimize but it is a bit of a challenge with a very stylie page and a lot of defaults.

Offline

#11 2017-08-15 06:25:18

grover_c
Member
Registered: 2016-12-10
Posts: 64

Re: drop down menu items with a line break?

BTW, the missing orange "(NEW)" text after Panoramic Photos and Solargraphy in mobile mode is not the result of the menu width – I've made the menu wider.  I'm not sure why it's not showing in the mobile layout.  Perhaps it has to do with the fact that I've jammed a span into the menu item to get the orange colour.  This is what I've put into the menu box in backlight.  Solargraphy  <span class="BCP_new">(NEW)</span>

Offline

Board footer

Powered by FluxBB