Change a few details for Mobile View

gregbtm

Customer
I'm readying my site for a refresh with 2.2 and I'm now mostly happy with the desktop/full view version. I wish to make some changes to the reduced width/mobile view. I've listed them below, and I'd be greatful if I could have any tips for acheiving what I'd like to see.

I'd like these brown icons to be white like they are on the full view. I can't seem to find a specific option for this.
1606419313988.png



Can I selectively show whatever footer blocks for mobile view? I use 3 of the 5 block positions, but would only like to use 1 or maybe 2.

1606419384396.png


I feel like my background texture that I use within the full view adds a lot of character. The wallpaper/background texture for mobile view doesn't show. Is there a way to create a gutter/padding for mobile view so a small portion of the background can be seen?

1606419454853.png


Last question, I promise!

Can I change the colour of my canvas menu? I don't like the colour it assumes.
1606419839019.png


Thank you! :)
 

Russ

Pixel Exit Staff
The navigation bar should technically inherit from: Style properties -> Header and navigation -> Nav tabs.

For the footer blocks, you can just add this into extra.less:

Code:
@media (max-width: @xf-responsiveMedium)
{
.xb-footer-block.xb-footer-block-1, .xb-footer-block.xb-footer-block-4 { display: none !important; }
}
This will hide blocks 1 and 4 on mobile for example.

You can add something like this into extra.less to show a tiny bit of it:

Code:
@media (max-width: @xf-responsiveMedium)
{
.p-pageWrapper {
    padding: 5px;
}
}

Style properties -> Miscellaneous -> Off-canvas menu, you can change the main background color here.

Let me know if that helps, sorry for the delay!
 

gregbtm

Customer
The navigation bar should technically inherit from: Style properties -> Header and navigation -> Nav tabs.

For the footer blocks, you can just add this into extra.less:

Code:
@media (max-width: @xf-responsiveMedium)
{
.xb-footer-block.xb-footer-block-1, .xb-footer-block.xb-footer-block-4 { display: none !important; }
}
This will hide blocks 1 and 4 on mobile for example.

You can add something like this into extra.less to show a tiny bit of it:

Code:
@media (max-width: @xf-responsiveMedium)
{
.p-pageWrapper {
    padding: 5px;
}
}

Style properties -> Miscellaneous -> Off-canvas menu, you can change the main background color here.

Let me know if that helps, sorry for the delay!
Hi there! Thank you! All of that worked except for the nav tabs part -

This is my current settings for the navigation tabs - I think this is where you meant?

1606560868285.png


I'm happy with how the navigation looks on my desktop version of the site - I can only think the icons on the mobile view are brown because a links are brown? (I think)

I just want to make all of the icons white.

Thank you!
 

gregbtm

Customer
It's okay. I added -

.p-nav {
color: #ffffff;
background: #141419;
}

to the extra.less - that seemed to have sorted it. Hopefully that doesn't ruin anything else! :p

Many thanks
 

Russ

Pixel Exit Staff
It's okay. I added -

.p-nav {
color: #ffffff;
background: #141419;
}

to the extra.less - that seemed to have sorted it. Hopefully that doesn't ruin anything else! :p

Many thanks

Sorry, I typed out the wrong property name. Technically should have been: Style properties -> header and navigation -> Navigation row. Extra.less will do the trick though too :)
 

gregbtm

Customer
Thank you for that! I noticed a potential bug when viewing on mobile. I have the nav bar that floats when you scroll. At the top of the bar, there seems to be a 1px gap between the bar and the top of the browser. When scrolling up and down you can see the site beneath the bar on that gap. If that makes sense.

Screenshot_20201201-012253.jpg
 

Russ

Pixel Exit Staff
It's a little strange as to why it's doing it. I'm not entirely sure to be honest.

Can you try adding this to your extra.less for kicks, I want to see if it'll help:

Code:
nav.p-nav {
    border-top: 1px solid #141419;
}
 

gregbtm

Customer
It's a little strange as to why it's doing it. I'm not entirely sure to be honest.

Can you try adding this to your extra.less for kicks, I want to see if it'll help:

Code:
nav.p-nav {
    border-top: 1px solid #141419;
}
I've added it to the extra.less template. It still seems to remain the same. I can't re-produce it on the browser on my computer - and the border seems to take effect/show - But on mobile, even after clearing cache - It makes no difference. It's weird.
 

Russ

Pixel Exit Staff
I've added it to the extra.less template. It still seems to remain the same. I can't re-produce it on the browser on my computer - and the border seems to take effect/show - But on mobile, even after clearing cache - It makes no difference. It's weird.

See on my mobile, I'm no longer getting that 1px gap. I'm using a Galaxy phone.

Can you also try this in extra.less just for kicks:

Code:
@media (max-width: 900px) {
.xb-page-wrapper { box-shadow: none; }
}
 

gregbtm

Customer
See on my mobile, I'm no longer getting that 1px gap. I'm using a Galaxy phone.

Can you also try this in extra.less just for kicks:

Code:
@media (max-width: 900px) {
.xb-page-wrapper { box-shadow: none; }
}
Make's no difference for me still. It's still apparent. I have found something even more strange - this same issue appears on the default vanilla XF theme.
 

gregbtm

Customer
Btw. Not sure where to post - but the new 2.2.2 update - will there be any changes requiring a new version of the theme(s) ? I'm using XenBase. Thanks bud.
 

Russ

Pixel Exit Staff
Btw. Not sure where to post - but the new 2.2.2 update - will there be any changes requiring a new version of the theme(s) ? I'm using XenBase. Thanks bud.

2 Templates outdated, you can merge them. They changed like 4 lines so it'll merge perfectly fine. I'm working on the updates, lagging as I'm almost done with something new in them.

If it's doing it on the Vanilla XF theme, make sure it happens on the XF community and then you could try posting it as a bug there.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.