Mobile Nav Fix

[ThriftStoreTeeth 78]

This one isn't actually an issue, but a fix. I wasn't sure if I should post it here or in Feedback and Discussion, but figured here was better because this is where people come for issues.

I've seen around/had my co-admin complaining about the hamburger icon being missing from the navbars on mobile, so I came up with a dead simple solution that is aesthetically identical to the Bootstrap version but with out the "will it/won't it load?" gamble.

 

All you've got to do is find both instances of this in your frame template (one for above the header image and one for below it):

<span class="navbar-toggler-icon" aria-hidden="true"></span>

and replace them both with this:

<span class="navbar-toggler-icon" aria-hidden="true"><i class="fas fa-bars"></i></span>

Then you want to add this to your CSS:

.navbar_toggler_icon { background-image: none!important; }
.fa-bars { color: rgba(255,255,255,.5); font-size: 25px; }

Of course you'll probably want to tweak the styling to match your layout for both the dark and light variants. I just grabbed the styles from the default hamburger icon that Bootstrap gives. I'm also 99.9% sure you could swap out the <i> FontAwesome gives you for another span or something else, but that span-ception feels semantically wrong to me so I didn't test it for myself.

 

Honestly, this is just a quick and dirty "whack it in and be done with it" fix, so its not the cleanest or most elegant solution, but it works. Consider it a duct tape fix for now. I'll be playing with this when I've had some sleep, and I'll post an update if I figure out something better.

 

Also, as an aside, it seems to me like the SVG Bootstrap is using for the hamburger icon is getting filtered out on mobile somehow. That, or there's an issue with the Sass preprocessor. Vivaldi doesn't have a console for the mobile version so I can't properly check without messing around in Bluestack to emulate it, and that's far beyond what my brain is capable of right now...

[Riseoftheg 25]

@ThriftStoreTeeth thank you! This worked perfectly. :D

[ThriftStoreTeeth 78]

@Riseoftheg No problem! I'm still working on a more elegant way of doing it, but writing code with a cat on your arms and a bit of a hangover makes things go a lot slower lol I can tag/let you know when I come up with something though, if you'd like.

[Riseoftheg 25]

@ThriftStoreTeethsure thing (like if there's a way to change the 'darling' login message? *snickers*) I can relate to both the cat and hangover instances lol.

[ThriftStoreTeeth 78]

@Riseoftheg All the default messages/alerts/instructions bits are handled in the language folder, so not really a CSS/HTML thing or something you can do from Vesta's admin panel. Not sure if you've got access to FTP to change that kind of stuff, but its filepath /applications/languages/en/messages.php I believe? I had a look at the languages stuff to see about making a French translation a while back, and I think that's the file for the welcome back message. If you can't get into the file system, there is a jQuery option, but its ugly and can cause things to break (it completely destroyed the avatar uploader on my Jcink site).

[Riseoftheg 25]

1 hour ago, ThriftStoreTeeth said:

@Riseoftheg All the default messages/alerts/instructions bits are handled in the language folder, so not really a CSS/HTML thing or something you can do from Vesta's admin panel. Not sure if you've got access to FTP to change that kind of stuff, but its filepath /applications/languages/en/messages.php I believe? I had a look at the languages stuff to see about making a French translation a while back, and I think that's the file for the welcome back message. If you can't get into the file system, there is a jQuery option, but its ugly and can cause things to break (it completely destroyed the avatar uploader on my Jcink site).

I have access to messages.php through the admin panel but I think you're right in regards to it not being CSS/HTML thing. I don't have access to FTP, I've been able to, for the most part, handle most of the changes through the admin panel. S'no biggie honestly, just curious. 🙂

[ThriftStoreTeeth 78]

@Riseoftheg Yeah, its not in the templates in the theme manager (my bad, should've specified that lol). If you're good with CSS, you might be able to hack it in with a [isEmpty=" "] to target that specific text, and some ::before/::after content somehow but I'm not 100% on how well that would work off the top of my head.

Actually, you're hosting your site with Arceus, right? Cause you could ask her to change the file for you. That'd probably be the easiest way to make a change like that, honestly.