Change a few details for Mobile View

[gregbtm]

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.

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.

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?

Last question, I promise!

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

Thank you!

 

[Russ]

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:

@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:

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

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:

@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:

@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?

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]

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!

Many thanks

 

[Russ]

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!

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]

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.

 

[Russ]

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:

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

 

[gregbtm]

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:

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]

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:

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

 

[gregbtm]

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:

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

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]

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.