Separator in 1st menu level breaks presentation

egloffpa

HI,

When I put a separator in the first level in a menu item, the frame and alignment are not correct.

Can something be done ?

Thanks

saguaros

egloffpa Are you using latest version of this template?

I just tested at my end but the separator menu item looks fine.

egloffpa

saguaros

Hi, yes I think. I use v 2.0.0

have a look here egloff.eu

Look at menu under "Technical" and then "Maps". You will see that this sub-menu is quite messed up.
It uses a separator amenu item type.

Thanks,

saguaros

You can try this custom CSS:

#mainnav .nav .parent ul li > span.mod-menu__separator.separator {
    padding-left: 12px;
}

egloffpa

saguaros
This helped a bit, but still differences between the other sub-emenus. The top and bottom paddings are not OK and the arrow is not aligned.

I tried to add padding-top and padding-bottom, but that didn't help.

BTW I modified the file under media/ja-simpli/custom-styles/25.css. Is this right ?

Thanks,

saguaros

Do you mean the icon, right?

You can use this custom css:

#mainnav .nav .parent .parent > .separator:before {
    top: 0px !important;
}

And I recommend to add these custom css code into this file: root/templates/ja_simpli/css/custom.css (Create this file if it doesn't exist now)

egloffpa

Hi and thanks for the answer.

This second modification has corrected the icon position.
But there are still 2 other problems

the hover background color is not working
the top and bottom padding are not the same as the other submenus

My page

I'm not sure to understand the difference between the custom.css file you recommand and the custom-styles/25.css

Thanks,

saguaros

Are you working on your site now? as I don't see the changes I suggested on your site now.

egloffpa

Hi,
It worked perfectly. I suppose until I changed the font in the theme customizer !
I also change the index.php to correct the hamburger menu problem.

I suppose that the modifications I made are gone ?

Is there a more reliable solution and an index.php that includes the hamburger menu and the sidebar position corrections ?

Thanks,

egloffpa

I added again the 2 modifications in the css file in use and it works again, apart the pending top/bottom padding and hover background color problems.

I modified the file /media/ja-simpli/css/custom-styles/25.css

How to make this mods independant of the modifications made in the theme customizer, waiting for a release of version 2.0.0 ?

Thanks for your generous help,

saguaros

I recommend to add custom css code into the 'custom.css' file so that when you update new version of template, it will not be affected.

egloffpa

saguaros HI,

I've added the modifications to the custom.css file, but they do show show up.

Looking at the browser development tools, this file doesn"t seem to be loaded but the /media/ja_simpli/css/custom-styles/25.css DOES !

How and when is this custom.css file used ?

Thanks,

saguaros

This file will be loaded when template is used. Could you share the super admin account so I can take a look?

egloffpa

This message is visible to Moderators only

hidden content

saguaros

I don't see that 'custom.css' file in css folder of template on your site: /templates/ja_simpli/css/custom.css

You should create this file and add your custom code there.

egloffpa

OK Saguaros,

I did that and this custom.css file is loaded.
I'm a bit confused with all these CSS files. There are several at different places.

For what are the /media/ja_simpli/css/custom-styles/XX.css files good for ?

Is a new release of the package planned ?

Thanks for your great help.

saguaros

egloffpa It due to new changes in Joomla 4 so it put the css file there - the same with free template of Joomla.

Anyway, we recommend to use that 'custom.css' file, it will not be affected when you update new version of template or Joomla.