Two-level Main Menu
Stepan
Hi! After the last update (to Helix 3.0.2), there is a problem with the two-level menu.
in previous versions, I made changes in the file /templates/shaper_helix3/css/template.css
in code
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { display: inline-block; padding: 0 15px; line-height: 90px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #000; margin: 0; }
changes line-height: 90px; to 45px and everything was fine
now the changes in this file do not change anything. What should I do?
i use Joomla! 3.10.5
Paul Frankowski
Accepted AnswerMy suggestion for custom.css file is:
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
padding: 0 11px;
line-height: 90px;
letter-spacing: 0; }and remove border-bottom (!)
Then You Can Dance.
Paul Frankowski
Accepted AnswerHi,
Dear webmaster please do not edit template.css (!) never, use custom.css file for all changes. It was and still is suggested method descibed in Helix3 documenation.
Put your design changes and overrides inside that NEW created custom.css file.
Now, I hope you know what to do.
Paul Frankowski
Accepted AnswerYou changed also this inside template.css (line 53):
.sp-megamenu-parent > li {
border-bottom: 300px solid #f5f5f5; }Really? Do you think that huge border value was a good idea. You have to be careful with all changes.
Maurice Molenaar
Accepted AnswerI checked and see something different when I visit your page.
Paul Frankowski
Accepted Answer@Maurice
It's becuase @Stepan added HUGE (300px) grey border-bottom for menu items. Happends. We all make mistakes from time to time.
Stepan
Accepted AnswerThank you for your answers! I did 300px for an experiment ) Nothing changes in Firefox. There is chrome in the changes.
I need a TWO-LEVEL menu, as it was before
I made a file/templates/shaper_helix3/css/ custom.css Put the code there
.sp-mega-menu-parent > li > a, .sp-mega-menu-parent > li > span { indent: 0 11 pixels; line height: 90 pixels; letter spacing: 0; }
removed the line border-bottom from the template.css file: 3px solid #f5f5f5;
I still can't dance))