Recent
Categories
View Replies (5)

Increase dropdown menu width

  1. Issue
0
Votes
Undo
  1. goodbottom
    goodbottom
  3. Commercial Templates
  4. Wednesday, 27 December 2017
  5.  Subscribe via email
Hello,
I'd like to increase the width of my dropdown menu.
- On my current website running with Joomla 2.5 and J51 DigitalEmpire template the dropdown menu is large enough to display the title of the linked article on a single line.
http://www.sergebonfond.be/
.
- On my "test" site running with Joomla 3.8 and J51 Magnolia template, the dropdown menu is too short, and the title is now displayed within two lines.
http://test.sergebonfond.be/index.php
.
Could you please give me the way to modify it.
Many thanks in advance.
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS) (edit to taste)... 

.hornav > ul > li > ul, 

.hornav > ul > li > ul > li > ul {

    width: 280px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
goodbottom
goodbottom
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

Thanks a lot for your reply.
It's much better now, I increased the dropdown menu width iaw your indication to 280px, then to 300px : http://test.sergebonfond.be/

The previous version (J51 DigitalEmpire) was auto-adjusting to the text lenght. http://www.sergebonfond.be/

Is there a way to get this auto-adjustement on J51 Magnolia ?

My very kind regards.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Sorry to say that option is not available with our Magnolia template.

You can however set different widths for each dropdown with the following where 344 is the parent menu item ID number (edit to taste - repeat for each parent item)...

.hornav > ul > li.item-344 > ul, 

.hornav > ul > li.item-344 > ul > li > ul {

    width: 220px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
goodbottom
goodbottom
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,
Thanks a lot for your reply, this is a very good solution anyway.
Again thank you very much for this excellent support.
Have a very good evening and Happy New Year ! ;)
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Wishing you a prosperous and happy new year. :)

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!