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

[Phases]

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]

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

 

[Shelley]

Here's also the code to have them directly underneath. Slightly modified.

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

 

[xIsabel38]

Here's also the code to have them directly underneath. Slightly modified.

.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

Is this put into extra.css?

 

[Shelley]

Is this put into extra.css?

Yeah, The extra.css template.

 

[xIsabel38]

Here's also the code to have them directly underneath. Slightly modified.

.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]

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]

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.

 

[Phases]

Thanks so much guys!

 

[Russ]

Here's also the code to have them directly underneath. Slightly modified.

.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

Very clean way of doing it nice Shelley.