Missing Navigation in Mobile

Hi @jadkins.iiq !

Have you set up any kind of Custom CSS on your community by any chance, or any Custom HTML/Scripts that modify the appearance? If so, try undoing those changes first and see if you still have the issue. If you don’t, your own code is probably the culprit. If you do, it might be a bug in the inSided platform - or a leftover issue from the outage this morning.

I’m not seeing any issues here on the inSpired Community or on my home forum. It might be worth pinging an email to support@insided.com just in case there’s still a leftover bug affecting you. :)

Thank you, @Blastoise186 !

The custom CSS was definitely the culprit… It’s only on one page within our forum. So does that mean we have to remove all custom CSS or just alter our code? Thank you again for your help!

You’re in luck. It can probably be fixed fairly easily. Please could you post all of your current Custom CSS in your next reply using a code block. I know the perfect person to tag team with to get this fixed. Hey @SmartlyGreg , could I call on your superpowers? XD

Oh, and if you could format the code block as CSS as well by setting the Language to CSS, that helps a lot. :)

.slider-trigger{
 color: #ffffff; 
}

.quicklink__container:nth-child(1n) .quicklink__box:nth-child(3n) {
  margin-right: inherit;
}

.quicklink__container:nth-child(1n) .quicklink__box {
  border: 1px solid #d5d6da;
  border-radius: 8px !important;
}

@media (min-width: 1025px) {
.widget-container--index-6 .quicklink__container>* {
  		width: calc(16% - 8px);
	}
}

@Blastoise186 I think I did this right? @SmartlyGreg you might recognize us haha you answered some of my coworker’s questions about adding this code to the widget. 

Perfect!

I’m not exactly an expert with coding anything, so Greg is better for that than me. However, I’ve run your code through the W3C CSS Validator and the W3C Markup Validation Service. No errors or warnings were flagged up by either tool, so your syntax is good.

Let’s start by taking out the .slider-trigger stuff, so you’re left with:

.quicklink__container:nth-child(1n) .quicklink__box:nth-child(3n) {
  margin-right: inherit;
}

.quicklink__container:nth-child(1n) .quicklink__box {
  border: 1px solid #d5d6da;
  border-radius: 8px !important;
}

@media (min-width: 1025px) {
.widget-container--index-6 .quicklink__container>* {
  		width: calc(16% - 8px);
	}
}

In fact, this change alone will probably fix your issue. :)

I’m also tempted to make another suggestion…

The colour you’ve got is really light. So maybe…?

.quicklink__container:nth-child(1n) .quicklink__box:nth-child(3n) {
  margin-right: inherit;
}

.quicklink__container:nth-child(1n) .quicklink__box {
  border: 1px solid #6779e0;
  border-radius: 8px !important;
}

@media (min-width: 1025px) {
.widget-container--index-6 .quicklink__container>* {
  		width: calc(16% - 8px);
	}
}

Thanks Greg! If only I had my own community to test things with… Somehow, I don’t think Tim would let me borrow even OVO’s staging instance…

However, playing with Chrome DevTools here does indicate that it might fix the issue in this case. That’s the closest I’ve got to actually testing it out properly, but it stays local to me and a page refresh wipes everything out.

@Blastoise186 thats how I do a lot of things! Chrome is pretty cool! 

Considering the cost of the solution, every community owner is likely bound by company security policies, including Tim I’m sure, so the only ones that can reasonably make it happen will be inSided! 

It worked! Thank you so much @Blastoise186 and @SmartlyGreg ! 

No worries, glad we could help! :)

Something’s still missing though. You don’t seem to have the right permissions on here by the looks of things. I think I should give you a welcome gift as a thanks for stopping by too.

Howdy @ravi.kurma ! Do you think you could give our guest the red carpet? It seems like the Customer Verify-O-Matic 3000 has decided to take a holiday. XD

Hi @jadkins.iiq!

Welcome to the community and I’m glad you were able to get your issue resolved so quickly! You are a verified member, so you should be good to go! 

Sincerely,

Ravi

Thanks, @ravi.kurma !

While I have y’all, @Blastoise186 and @SmartlyGreg - with the same CSS, we got the tiles to be the size that we want but with our company font, the standard subheading text no longer fits on one line. Is there a way to add coding to this to change just the font size of these?

Hmm… You’d be asking a lot there…

You probably can fix that by reducing the font size ever so slightly. Ideally not so much that anyone would notice, but enough to get that single character onto the other line. Either that, or reduce the whitespace around the text.

Greg would know how to do that more than I would. :)

@jadkins.iiq actually I can’t do much more than what @Blastoise186 mentioned, you can add a font-size criteria to this, or choose to add a hyphen between “Power” and “School” to control the break. 

Alternatively you might want to look into the:

white-space: nowrap;

Hard to say here without being on the page really, if this doesn’t help please share the URL if public or maybe a url for the staging with similar content?

@SmartlyGreg the URL is https://incidentiq-en-community.insided.com/knowledge-base

@jadkins.iiq there are multiple solutions to this obviously, what you could do is add the style white-space: nowrap as I’d mentioned before:

<h3 class="card-widget-title" style="white-space: nowrap;">PowerSchool</h3>

When I apply it as is above through the browser it looks like this (slightly off center):

But if you apply this to all of them by adding the same style to the entire class though you will have issues, for example Infinite Campus will look like this:

You could choose the font-size that makes sense for the most of them or choose to show 5 per row with a wider space between each… 

I think my favourite option would be to reduce the padding on the white box container of the text which is set at 24px currently down to 20, to do so just open the custom CSS through “Theme” menu and add the following:

.quicklink__title {
    padding: 8px 20px 16px !important;
}

I’m not sure whether this is a custom HTMl module or some existing module you’ve tweaked, so hard to say the best way to do this so as to minimise impact elsewhere. The ideal solution being to add a class for this specific purpose and set the padding there.

Hope this makes sense...

@SmartlyGreg that did the trick! It looks great. Once again, thank you for your help!