Move Position of Page Title

Hi Ariana,

It looks like you’ve already experimented with some CSS to achieve what you’re after?

I tested the following on the theme’s demo site, which worked well:

.hero {
    position: relative;
    margin-bottom: 50px;
}

.hero .page-title {
    position: absolute;
    bottom: -50px;
    color: inherit;
    text-shadow: none;
}

Let me know if that helps or if you’re still looking for solutions here.

Thanks!

Hi Siobhan,

What I did was actually add the below css (which I found from an older question in the forum) so that pages which have a featured image uploaded to it would show a designated featured image on the actual page:

.hero-image .hero.with-featured-image {
padding: 170px 0 2em 0 !important;
background: url(“wp-content/uploads/2016/10/balfour-1230×201-11.png”) no-repeat scroll 0 0 transparent;
}

BUT on pages that don’t have a featured image uploaded to it, the css you sent still doesnt’ work.. I have created a test page to show you what I mean: https://celebratebalfour.org/test-move-page-title/

Thanks so much!
Ariana

Hi again,

That css you gave actually removed the page titles altogether which is no good so I removed it…

Basically if we have a featured image uploaded, then the titles are under the graphic, but if there is no featured image and it shows the main site header, that is where it still goes on top of the graphic…. So I guess for now we’ll just have to make sure all stories have featured images uploaded in order to fool the system ??

Hi Ariana,

I used by browser’s inspector tool to test the CSS I provided on the example page you gave and it appeared to work. Here’s a screenshot of what the title looked like for me:

If you’re happy with your other CSS, though, then that’s great but let me know if you’d like to further work with the snippet I provided.

Hey Siobhan, I posted the code you gave and this is what I see https://celebratebalfour.org/test-move-page-title/

Thanks,
A

The first part of the CSS I provided isn’t appearing in your site’s stylesheets:

.hero {
    position: relative;
    margin-bottom: 50px;
}

Can you make sure that it’s been added correctly? Also, where is it you’re copying the custom CSS to?

That is odd bc it is def there… here is a screenshot: https://celebratebalfour.org/wp-content/uploads/2016/11/Screen-Shot-2016-11-07-at-2.38.54-PM.png

Hi @starburstcomm,

I spotted an extra } after the CSS for .event-title h3:

.event-title h3 {font-size:16px;}
}

Can you try removing that extra } as it may be causing issues with the CSS after it? It should then look as follows:

.event-title h3 {font-size:16px;}

Let me know how it goes.