Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hey need some help with my site take a look at it and see what you can do for me to fix my problem for the mobile version of the site.
jameshull94.com
Hi James
Thanks for your question.
You have the following added to AppearanceCustom CSS:
body.responsive.layout-full #page-wrapper .full-container #primary.content-area{ margin-top:180px; width:100%;Change that to the following to limit its scope:
@media (min-width: 680px) { body.responsive.layout-full #page-wrapper .full-container #primary.content-area { margin-top: 180px; width:100%; } }hey so i just did what you said and now the content is half way hidden from the fixed header i got how do we fix this.
Remove everything from Custom CSS and insert:
.main-navigation { box-shadow: 0 2px 10px #555; }hey so i removed it all and inserted that but it made my site not have the fixed header like i got made for it that i need.
Have you enabled AppearanceTheme SettingsSticky Menu?
yeah i did that earlier but it only has the menu so it stays i want it so it has my logo fixed and the menu is fixed with the logo like i did earlier. this is what i want check out my site. i just need it so i don’t have the big space between the fixed header i got made only on the mobile devices.
jameshull94.com
i mean i need to have the content on my pages moved down only for my mobile devices
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
ok thanks a lot
This is a private message.
This is a private message.
ok i just got it setup
is it working for you
Yes, thanks.
The problem is that the header resizes. So in theory we’d need a whole series of adjustments to keep the top margin/padding at the right value. I’m trying to think of an alternative.
ok let me know when you have found a solution to this problem of mine
The cleanest way to do this would be to only use the sticky masthead above 1080px. There are often issues with sticky elements on mobile so there are other reasons to do this. Check it out now.
I’ve deactivated Simple Custom CSS and combined your Custom CSS. It’ll help load time a tiny bit.
Ok so its still fixed header on the desktop but on the iPad and on the cell phones it is no longer fixed header so is there a way that the iPads,tablets,and all mobile devices have the fixed header
That’s correct.
The problem is that below 1080px the height of the header is constantly changing. So to avoid the gap you’ve asked about you’d have to have a whole series of media queries to keep adjusting the top margin/padding. Does that make sense? The cleanest most elegant solution is to remove the fixed header for mobile.
We do our best to assist with custom changes like this but there is only so far we can go. If you’d like we can offer say three media queries and you can can adjust the top margin/padding at those three points. It’s up to you.
In conclusion this is one solution:
/* Header */ @media (min-width: 1080px) { header#masthead { position: fixed; z-index: 300; width: 100%; box-shadow: 0 2px 10px #555; top: 0; min-height: 195px; } body.logged-in header#masthead { top: 32px; } body { padding-top: 180px; } }The other solution is to adjust the padding-top at a few points, but, because the header height is changing constantly below 180px it won’t be perfect. To try that, replace the above with:
header#masthead { position: fixed; z-index: 300; width: 100%; box-shadow: 0 2px 10px #555; top: 0; } body.logged-in header#masthead { top: 32px; } body { padding-top: 180px; } /* Top padding up until 1080px */ @media (max-width:1080px) { body { padding-top: 180px; } } /* Top padding up until 780px */ @media (max-width:780px) { body { padding-top: 180px; } } /* Top padding up until 480px */ @media (max-width:480px) { body { padding-top: 180px; } }See the three media queries above, you’ll need to adjust the 180px value in all three.
ok thanks for the help.
For sure. Let us know if anything isn’t clear about the above two options.
hey i did option 2 works good. now is there away for me to adjust the header padding for the mobile screen.
Sure, you need to adjust the values in the three media queries. Please, see my comments:
You’ll need to adjust the 180px value in each rule. Hopefully, the comments make sense.