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

 hover not working [SOLVED]
i'm trying to get a hover effect when mousing over the left button on my topbar, but for some reason nothing happens, and i can't figure out why for the life of me.

my stylesheet:
.topbarmain {
 width: 100%;
 height: 45px;
 background-color: #202322;
 position: fixed;
 z-index: 99;
 margin-top: -90px;

.topbarnav {
 width: 45px;
 height: 32px;
 border-right: 1px solid rgba(227,227,227,.2);
 color: rgba(227,227,227,.9);
 font-size: 15px;
 float: left;
 padding-top: 13px;

.topbardropdown {
 width: 100%;
 height: 0px;
 background-color: #222;
 position: relative;
 top: 42px;
 position: fixed;
 transition-duration: 1s;

.topbarnav:hover .topbardropdown {
 height: 120px;
 transition-duration: 1s;

my wrapper:
<div class="topbarmain">
<div class="topbarnav"><i class="fa fa-bars" aria-hidden="true"></i></div>
<div class="topbardropdown"></div>

link to board:
So this in your CSS

.topbarnav:hover .topbardropdown

Translates to:

When the class 'topbarnav' is hovered, style the class inside 'topbarnav' which is called 'topbardropdown'

Right now 'topbardropdown' is outside of 'topbarnav' and since that's the only CSS I see with hover attached to it, that's why it isn't working. (Hope that makes sense.)

Since we don't see 'topbarmain' close I don't know how many other elements are wrapped in it, so it might not produce what you're looking for, but you can try replacing:

.topbarnav:hover .topbardropdown {


.topbarmain:hover .topbardropdown {

Kindly do not contact me on Discord or PM me for support.

user posted image
putting .topbardropdown inside the .topbarnav did the trick. i actually didn't know that's what it translated to. the more you know. tysm!
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

email: :: blog: John C.
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