Header transformation on small devices
Permalink Browser Info Environment
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
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 |
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
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
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:
Please clear your cache after adding the code.
Best regards
David
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:
Please clear your cache after adding the code.
Best regards
David
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
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
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:
Best regards
David
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.
Best regards
David
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
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
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:
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
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.
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
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
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
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
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
Great, have a nice weekend!
Jens
Jens
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:
Best regards
David
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.
Best regards
David
Hello David,
that's perfect, thank you very much.
Probably others will be able to use this well.
Best,
Jens
that's perfect, thank you very much.
Probably others will be able to use this well.
Best,
Jens
No worries Jens, we got there in the end :)
Best Regards,
David
Best Regards,
David
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:
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