How to change title position on pages it is too high


#1

Hi there how to change the Pages title position so it comes down the page a bit more? Right now its too far up and covers over the site description.

See screenshot

My site example page http://frankscrub.com/about/

Also how to set a logo? I can set header image but not actual logo in customiser options.

Thanks!


#2

And how to make the site description tighter up to the site title so its like right under it and not so much padding. Thanks!


#3

Hello there,

Thank you for asking.

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

.page-wrap{
  padding-top: 119px;
}

To set your site logo, go to Appearance > Customize > Site title/tagline/logo > Upload your logo.

Regards,
Kharis


#4

> And how to make the site description tighter up to the site title

Try to add the following CSS code.

.site-description{
  margin-top: 0;
}

Regards,
Kharis


#5

Hmm it means having another plugin installed/running which adds to page load speed. Is there another way of adding that without installing a 3rd party plugin?

Example: entering into the style.css ?

Thanks!


#6

Hello there,

Yes, you can enter those codes to style.css file. If possible, you could pass it in the child theme mode. So that the code addition won’t be overridden once you update theme theme in the future.

Regards,
Kharis


#7

If I install that child theme I will have to set up my site/slider etc again?

I have tried to enter that css into style.css and updated/refreshed/deleted cache but it did not do anything at all. Still pages title is too far up the page.

Is there some specific css control for that I can twiddle with in the style.css?

Thanks.


#8

> If I install that child theme I will have to set up my site/slider etc again?

You won’t have to do it again. The existing setups will remain.

> … but it did not do anything at all. Still pages title is too far up the page

Could you try to add !important?

.page-wrap{
  padding-top: 119px !important;
}
.site-description{
  margin-top: 0 !important;
}

Regards,
Kharis


#9

Thank you for your continued support Kharis, I have now tried that and entered that into the bottom of my style.css file but again, it is not making any difference.

What is the css control for the page title so I can change the line height or padding whatever?

Thanks!

Also, how to add widgets to my blog sidebar?

Thanks.


#10

> … it is not making any difference

It seems to work fine here. Try to open it in different browsers.

> What is the css control for the page title so I can change the line height or padding whatever?

.hentry .title-post{
   /* Your style rules go here */
}

Regards,
Kharis


#11

> Also, how to add widgets to my blog sidebar?

Go to Appearance > Widgets > Add some widgets to “Sidebar”

Regards,
Kharis


#12

Hi Kharis, I have widgets on my sidebar already. But they do not show on blog page http://frankscrub.com/blog/

Screenshot http://i.imgur.com/pdEOYZa.jpg

They show on other pages but not the blog page. Do you know why that is?

Thanks. I will try to fiddle around but may have other questions later.


#13

Hello there,

I’m afraid the sidebar is only visible on “Classic” blog layout.

To make it also be visible on “Masonry (grid style)” layout, try to do the following.

  1. Install and activate the Sydney child theme
  2. Copy home.php file from parent theme to child theme
  3. Open sydney-child/home.php file in your code editor
  4. Find the following lines
<?php 
	if ( get_theme_mod('blog_layout','classic') == 'classic' ) :
	get_sidebar();
	endif;
?>

replace it with the following

<?php
	if ( get_theme_mod('blog_layout','classic') == 'classic' || get_theme_mod('blog_layout','classic') == 'masonry-layout' ) :
	get_sidebar();
	endif;
?>
  1. Apply the following CSS code
@media only screen and (min-width: 992px){
  
  #primary.col-md-9{
    width: 75%;
  }
  
}

Regards,
Kharis


#14

Thanks Kharis. I will try that. I’ve noticed that the page title is now okay but the content is starting too far down on the page. Example if you look here http://frankscrub.com/frank-body-coffee-scrub-discount-code/ the Posted on date and author is far up above where the content starts. How to reduce that space there?

Thanks!


#15

Hello there,

Could you please try to apply the following CSS code?

.hentry .title-post{
  padding-bottom: 0;
}

Let me know how it resolves the issue.

Regards,
Kharis


#16

Hi Kharis, as you can see, that has not had any effect. There is still a big game between the Page title and the start of the content.

Open to any more suggestions.


#17

Hello there,

Try to set the Page Builder row padding top and bottom to 0px https://cloudup.com/cd-bYgJv7GK

Regards,
Kharis


#18

Nope, makes no difference at all. I note I didn’t have one called “Theme” it was called “Layout” if that makes any difference.


#19

Hello there,

Thank you for updating me.

Could you please try to apply the following CSS code?

#pg-1165-0 > .panel-row-style{
  padding-top: 0 !important;
  padding-bottom: 0 !important;  
}

Let me know how it works.

Regards,
Kharis


#20

No no no nothing is working!

Blog posts still have BIG empty space between title and content.

Also the blog posts on my /blog are too high up the page now.

Also for some reason now, the pages title is almost above my logo now too!

I appreciate all the support Kharis but looks like I’m going to have to find something else, I’m no WP noob and know some codex but this is one of the hardest themes I’ve ever used to customize.

Cheers!