Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
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
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 2/3 test site
Offline
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
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
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
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
OK. I've updated to 1.2.2 and have the same problem. Any ideas would be appreciated.
Thank you
Offline
A link might be helpful!
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
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
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
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
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
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