Display more properly the log in menu

aalisg

Hello,

We have a website running Joomla! 5.3.1 with JA Athena template.

On all pages we have on the top and on the right of the search module a menu which displays two log in menu items: "CONNEXION" and "INSCRIPTION" in french, "LOG IN" and "SIGN UP" in english. The menu and the two menu items which composes it are not displayed the way we would like.

1) We think the menu is displayed too low, in fact we would like it to be displayed higher. With the CSS inspector we found a .t4-module section in the template.css CSS style sheet on line 15542 with the property margin-top set to 3rem. Is it possible to remove it or set it to 0, ideally without impacting the others modules with .t4-modules CSS displaying properties?

2) The menu is too close from the search bar module, can we set to it like a margin-left CSS property in order to separate both modules?

3) We would like these two menu items to be displayed vertically and not horizontally like:

"CONNEXION"
"INSCRIPTION" instead of "CONNEXION" "INSCRIPTION"

and

"LOG IN"
"SIGN UP" instead of "LOG IN" "SIGN UP"

Ideally this vertical displaying should be aligned with the search bar module as well as its total height should corresponds to the height of this same search bar module with a top, bottom and middle (between the two menu items) margin.

Can you help us to make these adjustments in a way that will support template and module updates?

Regards,

saguaros

aalisg Hello

You can try this tweak:

1/ Navigate to the Advanced tab in backend settings of this menu module >> change the Module Style to None
2/ Add a new module class menu-r, for example (remember to add a space before the class name)
3/ Open the file: /templates/ja_athena/local/css/custom.css

and add this custom CSS rule:

ul.nav.navbar-nav.menu-r {
    flex-direction: column;
}

.header-wrap .navbar>.navbar-nav.menu-r .nav-link {
    padding-top: 0;
    padding-bottom: 0;
}

aalisg

Hello and thank you for your reply,

It is perfect except for 2) The menu is too close from the search bar module, can we set to it like a margin-left CSS property in order to separate both modules?

Do you have an idea for this request?

Regards,

aalisg

UP!

saguaros

You can try this custom CSS rule:

.t4-topbar .navbar {
    padding-left: 1rem;
}