So I am redesigning a clients joomla site. The orginal designer had coded the site. He has the navigation's z-index set to relative and the z-index to 100. The image background I had created for the navigation system is in relative position and has a z-index of 1. But when I position the nav over the image it hides behind. I don't think the index for the navigation system is being recognized at all. How could I possibly fix this? The navigation is on the top right hand corner, btw. Heres the site: www.sheasconsignanddesign.com


I assume this is more or less what you're trying to achieve:

Main menu layout

There are a couple of issues with your approach:

  1. The current main menu is located in a completely different container (.artisteerheader) than your logo and menu background image (.artisteerdeco). Event though it's possible to move the main menu outside it's container (and above the other), don't do it. See if your template has another module position, the same as the logo/menu background image uses. You can find available module positions for Artisteer templates here: http://www.artisteer.com/?p=help_joomla#joomla4.

  2. Using an image with fixed menu backgrounds is not a good idea. It will almost certainly look wrong in certain browsers (just look at the image above, the text is not perfectly aligned for each button). If you need the exact same layout of the buttons as your image, use a .png image behind each li element.

Another (better) option is to use CSS to create the buttons. Try using the following code (and use a simple black background for your main menu bar):

 ul.menu li {
  background-color: #CAC6AF;
  width: 124px;
  padding: 3px 3px;
  margin: auto 20px;
  text-align: center;
  border-radius: 23px;
  border: 7px solid white;

You'll get something like this:

Move the main menu module to a different position, and play around with CSS (margins and paddings) to get it correctly aligned.

Main menu CSS

Hope that helps a little :)

  • Yes it helped me out a lot and I know better now and have made the necessary changes. I even changed the module position. But I'm still having a problem with the z-index. I want the navigation buttons to appear on top of the background image but for some strange reason it keeps hiding right behind the ribbon. Jun 23 '15 at 14:08
  • Nevermind! It worked! Thank you so much! This is why I love SO. Jun 23 '15 at 15:06

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.