Position all submenus of the navigation (not nestable) except the last one

How To
,
1

My problem is that, thanks to the AI, I’ve figured out how to position the wider, front-end submenus centrally under the respective main menu item. Unfortunately, the first CSS entry places the last submenu under the second-to-last main menu item.

%root% .bricks-nav-menu .sub-menu {
  left: 50%;
  transform: translateX(-50%);
}
Summary

Link to the Video: Euro Hoster Storage

When I add the next entry, which is supposed to exclude the last submenu, nothing changes in the Bricks Builder compared to the first entry, but in the front-end output outside of the Bricks Builder, the first lines of all submenus are overwritten.

%root% .bricks-nav-menu:last-child .sub-menu {
  left: auto;
  transform: none;
}
Summary

Link to the Video: Euro Hoster Storage

Does anyone have any idea what I did wrong?

2

Hello @Matze202,

you will probably need to use CSS like below instead. You need to target last li not last .bricks-nav-menu class.

%root% .bricks-nav-menu li:last-child .sub-menu{
  left: auto!important;
  transform: none!important;
}

Hope this will work :slight_smile:
Matej

3

Great, thank you, it works!!!

It wasn’t the “!important” that was the problem, but the “li”!

1 Like