I'm currently struggling with the top nav menu in Joomla's Beez3 template. I would like the highlighted menu item not to fill the whole space but just let's say 5px rounded around the text. The rest of the menu item space should be left transparent.

What I've tried is the following in my personal.css file:

#header ul.menu a:hover
    padding: 5px 5px 5px 5px !important;
    margin: 7px 10px 7px 10px !important;

This is only part of a bigger CSS definition (both the selectors are many more and the styles are more. I just reduced it to the relevant part.

For some reason, this is not working as expected. The right border of the menu is suddenly gone and the menu is "jumping" slightly when hovering over the first menu item.

I guess it's not all that easy... Can anyone help me here?

Thanks in advance.

  • May we have a link to your live site so that we can experience/analyse the specifics of your scenario? – mickmackusa Aug 25 '19 at 0:47
  • well, yes. It's sektion-pfadertal.de – TomS Sep 3 '19 at 10:04
  • To make your question "active" again, edit your question with this detail (then please delete you comment). – mickmackusa Sep 3 '19 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.