Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Navstrip taking up extra space [SOLVED]
#
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 Star

This 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.png

And 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.png

This 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; }


This post has been edited by VioletPadfoot: Oct 2 2017, 01:50 AM
PM
#
Try adding:

.WSTBNav {pointer-events: none}
#navstrip a {pointer-events: all}

to your CSS (stylesheet).

signature
user posted image
#
Thank you owl ! That worked!
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature

user posted image
YouTube | Email: crystal@jcink.com | Blog: Seriously Lacqueing
DeviantArt
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll