Solved Helix Framework

two-level main menu

Asked by Stepan 4 years ago Last activity 4 years ago

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

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

4 years ago · edited

My 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.

6 more replies

Paul Frankowski Senior Staff

4 years ago · edited

Hi,

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 Senior Staff

4 years ago · edited

You 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

4 years ago

I checked and see something different when I visit your page.

Paul Frankowski Senior Staff

4 years ago · edited

@Maurice

It's becuase @Stepan added HUGE (300px) grey border-bottom for menu items. Happends. We all make mistakes from time to time.

Stepan Asked this

4 years ago

Thank 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))

Paul Frankowski Senior Staff

4 years ago

With a single menu row - looks much better.

Just refresh browser cache ;)