Navigation Issue: Club Tabs on a Mobile Device

[USCJ Digital]

While testing our community on my Galaxy S7 yesterday, I noticed a potential navigation issue for users within clubs.

If you open a club on a device with a phone-size screen, the Overview tab displays, and there is a 'down arrow' (circled in red in the screen shot) to show the drop-down of other club tabs.

The functionality is working as expected. However, the black 'down arrow' is barely visible against the dark grey background beneath the banner photo. Many users will not see this, and may become frustrated.

Questions:

1) Is this a bug/mistake (should the down arrow be white, for example)?

2) If not, which is my guess, is there a theme color setting that controls that background under the banner photo for clubs? If so does anyone here know off-hand what the correct item in Themes > Front End/Button Colors is so I can adjust?

Thank you for any insight/guidance you can provide!

Be well,

Howie

 

[steve00]

1 hour ago, USCJ Digital said:

While testing our community on my Galaxy S7 yesterday, I noticed a potential navigation issue for users within clubs.

If you open a club on a device with a phone-size screen, the Overview tab displays, and there is a 'down arrow' (circled in red in the screen shot) to show the drop-down of other club tabs.

The functionality is working as expected. However, the black 'down arrow' is barely visible against the dark grey background beneath the banner photo. Many users will not see this, and may become frustrated.

Questions:

1) Is this a bug/mistake (should the down arrow be white, for example)?

2) If not, which is my guess, is there a theme color setting that controls that background under the banner photo for clubs? If so does anyone here know off-hand what the correct item in Themes > Front End/Button Colors is so I can adjust?

Thank you for any insight/guidance you can provide!

Be well,

Howie

 

Have you tried viewing same with IPB default theme (asking as looks like a custom theme and so may need changing via theme author)

[USCJ Digital]

32 minutes ago, steve00 said:

Have you tried viewing same with IPB default theme (asking as looks like a custom theme and so may need changing via theme author)

It's not a custom theme. Everything you see is a 'default' theme. The only changes were made directly through the AdminCP > Themes > Front End/Button Colors.

No third  party themes installed (in fact, no third-party anything installed!).

My guess is I just need to change the default background color, if that's possible via the AdminCP. I am just not certain which element it is I need to change, and thus seeking the wisdom of the crowd in hopes of not spending too much time tinkering 😉

 

[newbie LAC]

.ipsTabs:not(.ipsTabs_showMenu) a[href="#tabs_club"] .fa-caret-down:before {
	color: #fff;
}

 

[USCJ Digital]

@newbie LAC ... thank you, I appreciate the response. Since I am not well-versed in CSS, I am uncertain where this would go.

If possible, as stated above, I would like to change this through the Admin CP > Themes > Background Colors. Do you know if one of the options there is connected to what you provided code for above?

Thanks!

[USCJ Digital]

I am guessing it could be one of these:

• Default profile header background
• Dark area background

Can anyone confirm 🙂? 

[newbie LAC]

Add the code in custom.css

[USCJ Digital]

@newbie LAC ... Ideally, I would like to make the change via the AdminCP which is why I am asking if anyone knows whether

• Default profile header background
• Dark area background

under Admin CP > Themes > Background Colors controls the color of the background as per my original screen shot 🙂.

I may experiment with this later today or next week, but if anyone actually knows, that would be fantastic!

[USCJ Digital]

For anyone following this ... it appears this may actually be a bug. I submitted a ticket and Invision is looking into it. Will post an update here when I know more 🙂 

[USCJ Digital]

So, there is indeed a 'bug' ... which should be resolved in the next platform update. In the meantime, if you encounter the same issue, you can temporarily add this to your custom.css (as per Invision support):

@media screen and (max-width: 767px) {
        #elClubControls li.ipsPos_left {
            float: none;
        }
}