I'm having an issue with skins I'm building. There's an area under the topbar that is unclickable. If a post button is scrolled there, you can't click it. You can't click links that appear there.
I right-clicked to inspect the code (as is my default when something doesn't behave as expected) and it highlights my Navigatin section. And while hovering, it doesn't show any of my margins or padding covering the affected area at all. But there are two line breaks in the code that I didn't put there, so I assume are part of the JCink Navigation coding.
I think it's these line breaks that are giving me the "no click zone" It's the only thing I can think of. Plus, when I use the code thing (that comes up on right-clicking then hitting "Inspect") to strip them out, I can click in the "no click zone" again. Do they serve a purpose I don't understand? Is there a way to strip them out?
The "no click zone" doesn't affect my sidebar, which is how i didn't notice it until my other Admin complained about not being able to click the post buttons, but I think that's because the sidebar has a higher z-index. And I can't use that so solve my problem, because the top bar needs to stay on top of the board.
Link to board:
Wish Upon A StarThis is what I see when I hit "Inspect" on my right-click menu. My div for the nav-bar section is selected, and when I expand it, I see this:
https://i.imgur.com/F2uCnhS.pngAnd this is an example of the "no click zone". The lines "Disney personified site and Luna needs to fill out the rest of this." are where the no-click zone is. My cursor is the normal arrow, and as as soon as I move down to cover the next line, it turns into a text-cursor.
https://i.imgur.com/47AC3HQ.pngThis is my code in that section of my wrappers:
CODE |
<div class='WSTopBar'> <div class="m-<!-- |g_id| -->"> <div class='WSTBLinks'> <a href="admin.php" target="_blank" class="acp-<!-- |g_access_cp| -->"><i class="fa fa-cog" aria-hidden="true"></i>Admin CP</a> <a href="index.php?act=modcp" class="mcp-<!-- |g_is_supmod| -->"><i class='fa fa-wrench' aria-hidden='true'></i>Mod CP</a> </div> <div class='WSTBLinks'> <a href='index.php'><i class='fa fa-home' aria-hidden='true'></i>Home</a> <a href='index.php?act=Msg&CODE=01'><i class='fa fa-envelope-open' aria-hidden='true'></i>Inbox</a> <a href='index.php?act=Arcade'><i class='fa fa-gamepad' aria-hidden='true'></i>Arcade</a> <a href='index.php?act=Members'><i class='fa fa-users' aria-hidden='true'></i>Member List</a> <a href='index.php?act=UserCP'><i class='fa fa-cogs' aria-hidden='true'></i>Settings</a> <a href="index.php?act=Login&CODE=03&key=<!-- |auth_key| -->"><i class='fa fa-sign-out' aria-hidden='true'></i>Log Out</a> </div> </div> <div class="g-<!-- |g_id| -->" style="display: none;"> <div class='WSTBLinks'> <a href='index.php'><i class='fa fa-home' aria-hidden='true'></i>Home</a> <a href='/index.php?act=Login&CODE=00'><i class='fa fa-sign-in' aria-hidden='true'></i>Log In</a> <a href='/index.php?act=Reg&CODE=00'><i class='fa fa-pencil-square-o' aria-hidden='true'></i>Register</a> </div> </div> <div class='WSTBNav'><% NAVIGATION %></div> </div> |
And my CSS for that section:
CODE |
/**************************************** TopBar *****************************************/ .WSTopBar { z-index:1000; position:fixed; top:0px; left:0px; width:100%; height:60px; background:#963CE6; border-bottom:2px solid #555; text-align:right; } .WSTBLinks { padding:0px 5px; font:22px/22px GreatThings; height:22px; margin:5px 0px; display:inline-block; font-weight:bold; } .WSTBLinks .fa {font-weight:normal;} .WSTBLinks a {color:#fefffb;} .WSTBNav { height:24px; font:22px/22px GreatThings; color:#fefffb; margin:-5px 0px 0px 10px; } .WSTBNav a {color:#fefffb;} #navstrip { font-weight:bold; padding:6px 0px 16px 0px; } #navi br { display: none; } |