Monitor Reply

Support

Header transformation on small devices

Permalink Browser Info Environment May 24, 2023 at 11:12 AM

Hello,
is it possible to disable the header transformation on scroll on very small devices? On e.g. iPhone portrait it might look better.
Thanks for your help,
Jens

Type:	Discussion
Status:	In Progress

VidalThemes replied on May 24, 2023 at 1:30 pm Permalink Reply

Hi Jens,

Thanks a lot for your purchase.

To achieve the look you want please follow the steps below:

1/ Click on the "Cog" icon on the top left of the concrete5 admin bar, from the menu select "Design" and then click "Customize".

2/ From the customize options scroll all the way to the bottom until you see the "Add Custom CSS" section, under that click on the toggle switch icon "Add Custom CSS" then "Edit CSS" in the CSS window that appears paste in the following CSS code:

@media (max-width: 25em) {
    header.primary-header.primary-header--fixed-nav.primary-header--resized, .ccm-page 
    .primary-header--resized .primary-header--search {
         height: 100px;
         line-height: 100px;
    }
}

3/ Click on "save" then click on "Entire site" and publish your page.

That should target the site at small sizes if it does not work try upping the "25em" part until it captures the device size you are targeting.

Hope that helps.

Best regards

David

strandbein replied on May 24, 2023 at 1:51 pm Permalink Reply 1 Attachment

Hi Dave,
there seems to be a mistake somewhere:
"newline character found in selector (forgot a comma?)".
Also with comma and higher values I am not successful.
Thank you,
Jens

VidalThemes replied on May 24, 2023 at 2:54 pm Permalink Reply

Hi Jens,

Sorry about that, I can see the issue now.

Please ignore the warnings in the CSS window, the CSS editor in Concrete is extremely old and it does not recognise media queries so it thinks something is wrong with the formatting, the reason its currently not working is it's getting overridden by some of the styles in a different part of the theme, and is a bit too small scope wise, please try the following instead:

@media (max-width: 35em) {
     header.primary-header.primary-header--fixed-nav.primary-header--resized, .ccm-page 
     .primary-header--resized .primary-header--search {
          height: 100px !important;
          line-height: 100px !important;
     }
}

Please clear your cache after adding the code.

Best regards

David

strandbein replied on May 24, 2023 at 3:30 pm Permalink Reply 1 Attachment

Hello Dave,
I deleted all entries from Theme Styling tool and went through Design / Owen CSS, cleared caches. Nothing happens, even with senselessly high values. You can try it yourself.
http://c5.stelze.at/start
Jens

VidalThemes replied on May 24, 2023 at 3:59 pm Permalink Reply

Hi Jens,

Sorry about that. It appears there is a bit more needed for this, the below is tested on both our test rig and your site through the dev console and it works, please give this a try:

@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav.primary-header--resized, 
    .ccm-page .primary-header--resized .primary-header--search {
         height: 100px !important;
         line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__h1 {
        height: 100px !important;
    }
    .ccm-page .primary-header--resized .mobile-nav-toggle {
        height: 100px !important;
        line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__logo h1 img {
        line-height: 100px !important;

Viewing 15 lines of 18 lines. View entire code block.

 
@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav.primary-header--resized, 
    .ccm-page .primary-header--resized .primary-header--search {
         height: 100px !important;
         line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__h1 {
        height: 100px !important;
    }
    .ccm-page .primary-header--resized .mobile-nav-toggle {
        height: 100px !important;
        line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__logo h1 img {
        line-height: 100px !important;
        height: 100px !important;
    }
}

Best regards

David

strandbein replied on May 25, 2023 at 8:11 am Permalink Reply

Hi David,
I see that the sizes are changing, but the actual scrolling motion is still there. I find those cluttered and annoying on small devices and would like to disable those on them.
Greetings Jens

VidalThemes replied on May 25, 2023 at 10:23 am Permalink Reply

You can change this in the theme, as a whole via the options in:

Dashboard > Modena Theme Options > Header Settings and switch off "Fixed Position Header" This will be on desktop and mobile sizes though.

If you want it done just for mobile you can use:

@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav.primary-header--resized, 
    .ccm-page .primary-header--resized .primary-header--search {
         height: 100px !important;
         line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__h1 {
        height: 100px !important;
    }
    .ccm-page .primary-header--resized .mobile-nav-toggle {
        height: 100px !important;
        line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__logo h1 img {
        line-height: 100px !important;

Viewing 15 lines of 21 lines. View entire code block.

 
@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav.primary-header--resized, 
    .ccm-page .primary-header--resized .primary-header--search {
         height: 100px !important;
         line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__h1 {
        height: 100px !important;
    }
    .ccm-page .primary-header--resized .mobile-nav-toggle {
        height: 100px !important;
        line-height: 100px !important;
    }
    .ccm-page .primary-header--resized .primary-header__logo h1 img {
        line-height: 100px !important;
        height: 100px !important;
    }
    .ccm-page .primary-header--fixed-nav {
        position: relative !important;
    }
}

Be aware though that the positioning when logged in (mobile view) will be out as the code for accounting for the fixed header and admin bar will still be running. However, it will be fine for visitors, you will need to set a solid colour for your header as currently, your text is white so when the header is sat above the hero unit rather than over the top of it, you will have white text on a white background.

To make this work 100% you will need a lot of alterations which are far beyond the remit of support, we are happy to quote for the work if you want to go in that direction, or if you already have a developer on board it would be worth batting this over to them.

Best regards

David

strandbein replied on May 26, 2023 at 10:59 am Permalink Reply

Hi David,
we probably misunderstand each other. I like the way the header transforms on scroll. On desktop and iPad it looks very good, that's why I bought the template.
Only on very small devices like iPhone it looks some silly. So I thought there is an easy way to turn off this scroll transformation behaviour on small devices, so that immediately the monochrome header can be seen without transformation.
But if that's too much of a hassle, it'll stay that way. Thanks for the effort anyway.
Best regards,
Jens

VidalThemes replied on May 26, 2023 at 11:37 am Permalink Reply

Hi Jens,

Ah I see, yes that makes it clearer. So what you are looking for is the smaller "transformed" header on mobile straight off the bat, gotcha!

This is probably more "do'able" than what I thought you were asking for, please leave it with me, and I will have a look at sorting something out for you, it will probably be early next week now, but I should be able to do this for you.

Best regards

David

strandbein replied on May 26, 2023 at 11:46 am Permalink Reply

Great, have a nice weekend!
Jens

VidalThemes replied on May 31, 2023 at 7:50 am Permalink Reply

Hi Jens,

Sorry for the delay getting back to you, I couldn't get to this as quickly as I thought.

Here is the new CSS, it should do what you want, please delete the previous CSS and replace with this:

@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav, 
    .ccm-page .primary-header--search {
         height: 70px !important;
         line-height: 70px !important;
    }
    .ccm-page .primary-header__h1 {
        height: 70px !important;
    }
    .ccm-page .mobile-nav-toggle {
        height: 70px !important;
        line-height: 70px !important;
    }
    .ccm-page .primary-header__logo h1 img {
        line-height: 70px !important;

Viewing 15 lines of 21 lines. View entire code block.

 
@media (max-width: 35em) {
    header.primary-header.primary-header--fixed-nav, 
    .ccm-page .primary-header--search {
         height: 70px !important;
         line-height: 70px !important;
    }
    .ccm-page .primary-header__h1 {
        height: 70px !important;
    }
    .ccm-page .mobile-nav-toggle {
        height: 70px !important;
        line-height: 70px !important;
    }
    .ccm-page .primary-header__logo h1 img {
        line-height: 70px !important;
        height: 70px !important;
    }
    .ccm-page .primary-header--fixed-nav {
        background-color: #303030 !important;
    }
}

Best regards

David

strandbein replied on May 31, 2023 at 7:56 am Permalink Reply

Hello David,
that's perfect, thank you very much.
Probably others will be able to use this well.
Best,
Jens

VidalThemes replied on May 31, 2023 at 9:42 am Permalink Reply

No worries Jens, we got there in the end :)

Best Regards,

David

Modena

Support

Header transformation on small devices

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post