How to change font-characteristics on sidemenu?

cemsdb

While the default-sidebar (JOOMLA PAGES) show a different font (bold) for menus with submenus ('J! Pages', 'Other Pages', 'Joomla Content'), the sidemenu which shows up on smaller screens have no such attributes (all menus below the mainmenu-items look the same, making it hard/impossible to distiguish menus and submenus).

How does one make changes to the menu-items with submenus in the sidemenu? To make them look different (bolder, grey background) from their submenus.

saguaros

I can see the style for parent vs child menu items are different now on small screen. Did you manage to solve it?

cemsdb

saguaros No, as mentioned it's everything below the main/parent menu.

As an example, please take a look at the "Solutions" (while the menu is on top) and you'll see it's immediate submenus "PERSONAL" and "ORGANIZATIONAL" are in caps and in gold color, which are different than subsequent child-menu-items.

But when the menu becomes a sidebar-menu it looses all childmenu characteristics. No one can tell the difference between "Personal"and "Organizational" and all its childmenus. They all look the same.

How do I change font-characteristics on the sibebar-menu for the second-child menu items (i.e. Solutions and Organizational)?

saguaros

As I can see that you add custom css for these group title items, you can use this for mobile collapsed menu:

.t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li.mega-group > a {
    color: #c5b48f;
    text-transform: uppercase;
    font-size: 15px;
}

cemsdb

saguaros Thank you, issue resolved!

cemsdb

saguaros How does one change the font characteristics of the second submenu (or any menu that drops down / has further submenus)?

1) I would like the three sub-menus under 'Solutions' > 'ORGANIZATIONAL' (specifically: 'Consulting', 'Hiring' and 'Performance') to become bold.

2) How does one get the menu's arrow (.dropdown-submenu > a:after) to be positioned closer to the menu-item? Instead of the far-right (it currently floats right).

saguaros

cemsdb Hi

You meant in mobile or desktop view?

cemsdb

saguaros I mean while on mobile view.

saguaros

You can try this custom css:

@media (max-width: 576px){
.t3-mainnav .t3-navbar-collapse .navbar-nav .open .level2.dropdown-menu > li.dropdown-submenu > a {
    font-weight: bolder;
}

.dropdown-submenu > a:after {
    position: absolute;
    display: inline-block;
    margin-left: 10px;
    margin-top: 13px;
}
}

cemsdb

saguaros Thank you, that worked great!

One last item related to this discussion:

1) The menu-item 'Link Class' doesn't seem to work on the sidemenu. As you'll note the menu 'Concierge' under 'Solutions' is bold in the topmenu, but is normal on sidemenu. How does one get the sidemenu to recognize custom 'Link Class' settings?

saguaros

cemsdb Hi

It seems this collapsed menu doesn't load that link class, you can try this custom css to define the font-weight for it:

@media (max-width: 576px){
.navbar-default .navbar-nav .open .level2.dropdown-menu > li:last-child > a {
    font-weight: 900;
}}

cemsdb

saguaros Unfortunately, your suggested code makes all the 'last-child' menu-items of similar levels become bold as well. I would like only specific menus to be bold.

Is there a way to add the current custom.css code for 'Link Class' (".font-bold") to the code you suggested (or similar) making the instructions more specific?

phinb

Hi @cemsdb

I updated on your site, kindly check and let me know if there is any issue 🙂

cemsdb

phinb Hi Phinb, thank you, that seems to have solved the issue!

To benefit other members, is this the code you added to the 'custom.css' file?

@media (max-width: 1201px){
.t3-mainnav .navbar-nav li:first-child .mega-group:first-child .level2.dropdown-menu > li:last-child a {
font-weight: 600;
}
}

phinb

cemsdb

Yes, you're right. I added that style line to update it for you.