XF 1.2 Change alerts popup to go down, rather than up (over inbox, alerts)

Phases

Active member
#1
Title says it all.

I've looked around, tried using inspect element - which I use very often, but I'm either just missing it or its more complicated that expected.

I would like the Inbox and Alerts popups that tell how many unread, to go under then text rather than over.

Can anyone help? Appreciate any assistance..
 

Sheldon

Well-known member
#2
Code:
#navigation .pageContent .navTabs .navLink .itemCount .arrow {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #E03030 rgba(0, 0, 0, 0) #000000;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 3px 1px;
    bottom: 16px;
    height: 0;
    line-height: 0;
    position: absolute;
    right: 4px;
    text-shadow: none;
    transform: rotate(180deg);
    width: 0;
}
#navigation .pageContent .navTabs .navLink .itemCount {
    background-color: #E03030;
    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    min-width: 12px;
    padding: 0 2px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    top: 19px;
    right: 0px
    white-space: nowrap;
    word-wrap: normal;
    z-index: 9999;
}
Screenshot_2.png
 

Shelley

Well-known member
#3
Here's also the code to have them directly underneath. Slightly modified.

Code:
.navTabs .navLink .itemCount {
top: 21px;
right: 15px;
z-index: 5000;
line-height: 12px;
height: 14px; }

.navTabs .navLink .itemCount .arrow {
transform: rotate(180deg);
top: -3px;
right: 5px; }
Screenshot_28.png
 

xIsabel38

Well-known member
#6
Here's also the code to have them directly underneath. Slightly modified.

Code:
.navTabs .navLink .itemCount {
top: 21px;
right: 15px;
z-index: 5000;
line-height: 12px;
height: 14px; }

.navTabs .navLink .itemCount .arrow {
transform: rotate(180deg);
top: -3px;
right: 5px; }
View attachment 61580
I put that code into Extra CSS and while it did turn the arrows upward, they didn't center. Was there something I messed up?
 

Shelley

Well-known member
#7
I put that code into Extra CSS and while it did turn the arrows upward, they didn't center. Was there something I messed up?
I forgot to mention that you'll have to adjust the right: and top: values if your navbar is a custom navbar that is more than the default xenforo height.
 

xIsabel38

Well-known member
#8
Alright well, I gave it a try but regardless it's not important now anyway, at least now they are pointing upward. Thanks so much for that.
 
Top