[cXF] Mobile logo header

BassMan · Nov 9, 2019

BassMan submitted a new resource:

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

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

Less:

/* [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 · Nov 9, 2019

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 · Nov 9, 2019

djbaxter said:
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 · Nov 9, 2019

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 · Nov 9, 2019

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 · Nov 9, 2019

Make sure you check it in portrait view.

djbaxter · Nov 9, 2019

It was in portrait view.

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

BassMan · Nov 9, 2019

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

djbaxter · Nov 9, 2019

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 · Nov 9, 2019

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 · Nov 9, 2019

So this only matters if the original logo is centered?

djbaxter · Nov 9, 2019

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 · Nov 10, 2019

@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 · Nov 10, 2019

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 · Nov 10, 2019

Thank you @Kevin.

No problem @djbaxter

Wilouness · Mar 3, 2020

Hello

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

BassMan · Mar 3, 2020

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

BassMan · Mar 3, 2020

Wilouness said:
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:

Less:

/* [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 · Mar 3, 2020

BassMan said:

For UI.X style use this code:

Less:

/* [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 · May 14, 2021

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

CSS fix

small CSS fix

Read the rest of this update entry...

[cXF] Mobile logo header

Well-known member

in memoriam 1947-2022

Well-known member

in memoriam 1947-2022

Well-known member

Well-known member

in memoriam 1947-2022

Well-known member

in memoriam 1947-2022

Well-known member

in memoriam 1947-2022

in memoriam 1947-2022

Well-known member

in memoriam 1947-2022

Well-known member

Active member

Well-known member

Well-known member

Active member

Well-known member

Similar threads

We value your privacy