Read before updating: How to Update Kunena Templates - More detail

[SOLVED] How to change z-index

R Topic Author
New Member New Member
  • Posts: 14
  • Thanks: 1

[SOLVED] How to change z-index

12 years 6 months ago - 12 years 6 months ago
#1148
I need to change the z-index of the forum because the main menu is behind the forum (instead of ontop).

How (and where) do I change the z-index?

Rene
Last edit: 12 years 6 months ago by renejdm.

Please Log in or Create an account to join the conversation.

ntstore's Avatar
Administrator Administrator
  • Posts: 1213
  • Thanks: 240

Re: How to change z-index

12 years 6 months ago
#1150
Hi,

There are two solutions for this issue. The first you can decrease the z-index of the for forum and second solution you can increase the z-index of the main menu. So I think you should increase the z-index of the main menu. You add the bellow CSS section to the css file of the joomla template.
Code:
#[your_menu_id] { position: relative; z-index: 200; /* you can change other number */ }

Regards
Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Please Log in or Create an account to join the conversation.

R Topic Author
New Member New Member
  • Posts: 14
  • Thanks: 1

Re: How to change z-index

12 years 6 months ago
#1157
Hi Hung,

This does not work. You can see the problem here: 108.178.38.106/~petdietd/index.php/support/forum/index

Rene

Please Log in or Create an account to join the conversation.

ntstore's Avatar
Administrator Administrator
  • Posts: 1213
  • Thanks: 240

Re: How to change z-index

12 years 6 months ago - 12 years 6 months ago
#1158
Hi Rene,

Thank you for send us the site url. We checked some issue on your site and provided you some CSS sections to fix your problems. Please copy bellow CSS code section to the insightfx-custom.css file.
Code:
/* Fixed main menu over */ #rt-top-surround { z-index: 200; } /* Fixed for Kunena navigation */ #Kunena #ktab a:hover, #Kunena #ktab #current a { border-top: 0 !important; } /* Fixed active menu color */ #Kunena #ktop #ktopmenu li.active a span { color: #fff !important; } /* Fixed color of the button */ #Kunena .kbutton, #Kunena input.kbutton { color: #fff; } /* Fixed link color on category */ #Kunena .kblock div.kheader h2 a:hover, #Kunena .kblock div.kheader h2 a:focus, #Kunena .kblock div.kheader h2 a:active { color: #fff; }

Please remove this code in the insightfx-custom.css file (about line 23)
Code:
/* Change header color to match template */ #Kunena .kblock div.kheader h2 { background: url("../images/border-mask.png") repeat-x scroll left bottom #33BEE8; }

We hope it works fine.

Best regards
Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore
Last edit: 12 years 6 months ago by ntstore.

Please Log in or Create an account to join the conversation.

R Topic Author
New Member New Member
  • Posts: 14
  • Thanks: 1

Re: How to change z-index

12 years 6 months ago
#1159
Hi Hung,

Thanks for that. It worked. There are only two small styling issues left. I will start a new thread for them.

Rene

Please Log in or Create an account to join the conversation.

ntstore's Avatar
Administrator Administrator
  • Posts: 1213
  • Thanks: 240

Re: How to change z-index

12 years 6 months ago
#1160
Hi,

When the menu sticky look not nice, you can re-style it. We propose you a style.
Code:
#js-mainnav.megamenu-sticky .js-megamenu { border-bottom: 1px solid #CCCCCC; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

Regards
Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore
The following user(s) said Thank You: renejdm

Please Log in or Create an account to join the conversation.

Time to create page: 0.274 seconds