[cXF] Mobile logo header

[BassMan]

BassMan submitted a new resource:

[cXF] Mobile logo header - Show logo in mobile header, but in navigation when scrolling

Would you like to have a mobile header with logo like this?

View attachment 213361



As you can see you can have a mobile header, but when you scroll the logo will show in the navigation.

To achieve this add code below to extra.less template:

/* [cXF] Mobile logo header */
@media (max-width: @xf-responsiveMedium) {
    .has-js .p-header {
        display: initial;
    }
    .p-header-logo {
        max-width: 100%;
        margin: 0 auto;
    }...

Read more about this resource...

 

[djbaxter]

I suppose it may depend on the size and position of the logo but on the sites I manage they already do that, both in the PixelExit styles and in the XF default.

I'm confused about what this mod adds or does differently? I can see that in your example the original logo is centered so it gets bumped down and left-aligned but more often the logo is left-aligned to begin with, is it not?

 

[BassMan]

I'm confused about what this mod adds or does differently?

It's just for the mobile look. By default, logo on mobile is in navigation. This small tweak adds logo in the header on mobile and shows it in navigation only when scrolling. Check this site on mobile and you'll get what I mean.

 

[djbaxter]

Maybe it's an Android thing?

I get this by default on iPhone without any changes to extra.less. And it's not a browser issue: I tried it on the iPhone with Safari, Chrome, Firefox, and Edge, and they all float the header by default.

 

[BassMan]

I'm looking on iOS too. But if I look at this forum and cXF I can see the tweak.

I can look on Android too. I can see the difference.

< default XF on mobile - no header displayed >

 

[BassMan]

Make sure you check it in portrait view.

 

[djbaxter]

It was in portrait view.

But even in your screenshot above the header is there. ???

 

[BassMan]

There is a logo in navigation. The header is above navigation.

 

[djbaxter]

What version of iOS do you have?

This is what I see for iOS 13.2.1.....

xenforo.com top



xenforo.com scrolled down



customizeXF top



customizeXF scrolled down



So in both cases the logo is displayed as I scroll down.

 

[BassMan]

Yes, I see this too. Not sure what is not obvious here.


< logo in header on mobile - header is visible only header (not in navigation), logo is bigger and centered >



< on scroll logo shows up in navigation >

 

[djbaxter]

So this only matters if the original logo is centered?

 

[djbaxter]

What I'm seeing browsing other Xenforo forums is if the original logo is centered or full-width, then it doesn't show in the nav bar. If it is left aligned (and maybe not too large if a mobile logo is undefined), then your mod kicks in. Is that correct?

By the way, I'm not trying to be argumentative here at all. I'm just trying to understand when the mod makes a difference and when it doesn't.

 

[Kevin]

@djbaxter If I may.... the question is not whether the logo shows up or not but where. Normally the XF mobile navbar is a single line with the hamburger menu, logo, and the icons. What this CSS is doing is displaying two lines when the page loads with the logo on line #1 and then the hamburger menu & icons on line #2. When you start to scroll on the page it then switches to the normal single line (hamburger / logo / icons). Check post #10 above... the first screen shot with the red square you'll see a larger then usual logo on mobile on line #1 with the hamburger & icons on line #2 but if you notice the last image in that post the mobile menu has switched back to the "normal" XF display after scrolling.

In short; with this change you'll see two lines on page load and then the normal single line after scrolling.

 

[djbaxter]

Oh good grief. I was looking at this backwards the whole time. I thought he was trying to get rid of the logo on top and move it to a single line, which is why I kept repeating that it was already that way.

Thank you, @Kevin. And apologies for being unintentionally obtuse, @BassMan. It's actually a pretty cool effect now that I understand it.

 

[BassMan]

Thank you @Kevin.

No problem @djbaxter

 

[Wilouness]

Hello

I still see the mini logo when i'm at the top of the page it don't disappear.

 

[BassMan]

You're using UI.X style. This will not work on there.

 

[BassMan]

Hello

I still see the mini logo when i'm at the top of the page it don't disappear.

For UI.X style use this code:

/* [cXF] Mobile logo header (for UI.X style) */
@media (max-width: @xf-responsiveMedium) {
    .has-js .p-header {
        display: initial;
    }
    .p-header-logo {
        max-width: 100%;
        margin: 0 auto;
    }
    .p-header-logo.p-header-logo--image img {
        max-height: 80px;
    }
    .p-navSticky .p-header-logo {
        opacity: 0;
        transition: all .25s ease;
        margin: 0;
    }
    .p-navSticky.is-sticky .p-header-logo {
        opacity: 1;
        transition: all .25s ease;
        margin: 0;
    }
    /* to hide icons in header if you're using [cXF] Icons in Header add-on */
    .cxf_icons_header_container {
        display: none;
    }
}
/*****/

 

[Wilouness]

For UI.X style use this code:

/* [cXF] Mobile logo header (for UI.X style) */
@media (max-width: @xf-responsiveMedium) {
    .has-js .p-header {
        display: initial;
    }
    .p-header-logo {
        max-width: 100%;
        margin: 0 auto;
    }
    .p-header-logo.p-header-logo--image img {
        max-height: 80px;
    }
    .p-navSticky .p-header-logo {
        opacity: 0;
        transition: all .25s ease;
        margin: 0;
    }
    .p-navSticky.is-sticky .p-header-logo {
        opacity: 1;
        transition: all .25s ease;
        margin: 0;
    }
    /* to hide icons in header if you're using [cXF] Icons in Header add-on */
    .cxf_icons_header_container {
        display: none;
    }
}
/*****/

Yep, now it works perfectly. I just had to change the max height to 100% because with 80px the logo was deformed
Thank you for your usual responsiveness

 

[BassMan]

BassMan updated [cXF] Mobile logo header with a new update entry:

CSS fix

• small CSS fix

Read the rest of this update entry...