[cXF] Mobile logo header

[cXF] Mobile logo header

BassMan

Well-known member
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:

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

Well-known member
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

Well-known member
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

Well-known member
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

Well-known member
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 >
Screenshot 2019-11-09 at 17.52.53.png
 

djbaxter

Well-known member
What version of iOS do you have?

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

xenforo.com top

iphone-top.PNG

xenforo.com scrolled down

iphone-scrolled-down.PNG

customizeXF top

customizeXF-top.PNG

customizeXF scrolled down

customizeXF-scrolled-down.PNG.jpg

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

BassMan

Well-known member
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 >
Screenshot 2019-11-09 at 23.54.20.png


< on scroll logo shows up in navigation >
Screenshot 2019-11-09 at 23.55.02.png
 

djbaxter

Well-known member
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

Well-known member
@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

Well-known member
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. :rolleyes:

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

BassMan

Well-known member
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

Active member
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
 
Top