- This topic has 16 replies, 3 voices, and was last updated 4 years, 11 months ago by David.
-
AuthorPosts
-
April 10, 2019 at 1:32 am #864704Tom Snelders
See for below question: https://drive.google.com/open?id=1lvzgVkfJRhOx5JF5ZO5H70eBaiHXeykX
I would like to have the page title visible at the bottom of the header element within a white block (similar width as the body)
As it almost looks like the body overlapse the header a little.
How can I smartly achieve this?
I thought to merge it in the photo using photoshop, but then I can imagine that it would not be shown correctly on a smartphone.
April 10, 2019 at 6:16 am #864894DavidStaffCustomer SupportHi there,
simplest way is to leave the Page Title within the content of your post, we can then add some negative margins to the main content to pull it up over your featured image.
Have you got a site set-up with the basics in place that i can see?
April 10, 2019 at 6:43 am #864915Tom SneldersI’m building this site (http://creatievewerkkamer.nl/de-werkkamers/geboorte/) behind a coming soon plugin.
So you can’t see it now. Or do you know a free coming soon plugin where I can give you using some setting access to? Or should I create an account for you on my site?
Or can you maybe tell me where I can add this negative margins? CSS?
April 10, 2019 at 6:44 am #864918DavidStaffCustomer SupportIf you want to send me some login details via the Account Issue form:
https://generatepress.com/contact/
Please add the URL of this Topic to the form so we can track.
I only need to see the frontend.
April 10, 2019 at 4:36 pm #865519TomLead DeveloperLead DeveloperHi there,
Give this CSS a shot:
#primary { margin-top: -100px; }
Let me know 🙂
April 10, 2019 at 11:03 pm #865678Tom SneldersHi Tom,
I think this worked out well.
Thanks Tom and David for the help!
Regs,
TomApril 11, 2019 at 2:06 am #865805Tom SneldersSorry, this css rule reflects to the entire site now.
How can I set this up for specific pages? Or how can I exclude this on some pages.
April 11, 2019 at 3:52 am #865892DavidStaffCustomer SupportIs there any particular logic to which pages you want it to effect?
For example – this would only apply to Posts:
.single-post #primary { margin-top: -100px; }
The
single-post
class is added to the body of all posts so you can target them specifically.Or do you have a header element on those pages you want it to apply to?
April 11, 2019 at 7:39 am #866245Tom SneldersYes, I don’t use header element for posts yet.
But I’ve got two element headers, one for my homepage and one for all other pages.
For my homepage element header I don’t want this css rule to be applied, it must be applied to the other header element.
Does this make sense?
April 11, 2019 at 7:44 am #866250DavidStaffCustomer SupportIf you just want to target just that specific page then you would use the Page ID like so:
.page-id-XXXX #primary { margin-top: -100px; }
Replace the XXXX with the relevant ID.
April 11, 2019 at 10:33 pm #866765Tom SneldersAnd can this also be turned around? Let it apply to all pages except for one?
April 11, 2019 at 10:37 pm #866767Tom SneldersO, and when I enable sections on a page after adding the above css the body is falling behind the header. The title is then gone. I think behind the header.
How can I fix this?
April 12, 2019 at 2:31 am #866885DavidStaffCustomer SupportYou can use a :not pseudo property in CSS so this would apply to all pages but the one you specify:
body:not(.page-id-XXXX) #primary { margin-top: -100px; }
Can you link me to that page with the Sections?
April 12, 2019 at 2:51 am #866910Tom SneldersThanks, that worked perfect.
Now I only have the issue with the page title falling behind the header section when using sections on my pages. The text within the sections do appear in front of the header element.
April 12, 2019 at 2:58 am #866916DavidStaffCustomer SupportSections automatically remove the Page Title. You would need to add one manually within the Top Section.
-
AuthorPosts
- You must be logged in to reply to this topic.