Page Title is jumping position

Hi Team,

My page title is automatically jumping up on the pages and I am not sure why. Is this a bug of some kind?

I centered the page title by adding the code - text-align: center; - to the bootstrap.min.css file in the parent theme Sydney because the option to edit H1 tags was not there in the Bistro stylesheet.

In the Bistro theme -> General -> Page wrapper - top padding is 75 so that the spacing is adequate.

Can you please tell me why this auto page title shift is happening?

Regards
Divya

Hello Divya,

First, it is not good practice to change styles inside bootstrap.css because it will be overridden on each theme update. Use child theme style.css in order to override styles inside bootstrap.css or use some plugin, like https://wordpress.org/plugins/simple-custom-css/

Regarding jumping of title, please share your site link, so we can check this on your end, thanks.

Best Regards!

Hi Dimik Jones,

Thank you so much for your reply!

I completely agree with you about the theme update. We wanted to shift the page title to the centre of the page instead of the default setting on the extreme left. We are actually using Bistro and tried finding some way to do this in this child theme stylesheet.css itself but nothing we did seemed to work.

After some research and trials found that the content had to be changed in that particular file in Sydney for it to reflect on the website. Can you tell us which the correct file is for making this change in Bistro?

The website is - www.beyondinary.com

Would really appreciate your help with this.

Regards
Divya

Hi again Divya,

I have checked your site, and you are not using titles on your slides, only button is present, and it is positioned fine http://screencast.com/t/iAYBaFwmcz0Q . Can you explain this a bit please? What is the problem with titles, or what you want to achieve? If you wan to move slider content a bit further, this can easily be achieved with few lines of css code.

Best Regards!

Hi Dimik,

So sorry for the late reply. We were actually out of town.

Ok so right now if you go to “Interests” -> say click the first tab “Gadget Enthusiast” you will see the page title “12 Unique products for the gadget enthusiast”. Earlier this page title was by default on the left of the page, we wanted to shift it to the centre.

It is now in the centre after we modified the code, as mentioned above, in the bootstrap.min.css file in parent sydney theme as we couldn’t find a code which worked in the Bistro css stylesheet. If you can provide that then it will be great.

Now this title “12 Unique products for the gadget enthusiast” is jumping up on the page. When the page is loading it’s about 2 inches below the grey colour header banner…then after a few seconds when the page finishes loading it jumps up to about 0.5 inches below the header banner. Why is this happening?

If you need any further info from me, please let me know.

Many thanks!
Divya

Hi again Divya,

Suggested page is trowing a lot of warnings because of something that you placed inside functions.php file. Fix this by removing your modifications, or since these are warnings, they are not actually harmful, so you can also try to disable wp_debug https://codex.wordpress.org/WP_DEBUG

Problem with jumping title is probably related to page loading time. As you can see, page is loading fer few seconds, and after it finished, content is positioned correctly because all scripts, and styles are loaded. This is probably because of large images, and you can see which ones you need to optimize here https://gtmetrix.com/reports/beyondinary.com/7OQBCmsx - check waterfall tab, and open images whit long load time on CTR + Click to see which images needs to be compressed. I sugest you to use .jpg file format for better compression, and if you don’t have photo editing tool, you can try some online tool http://compressjpeg.com/

After changing images which smaller ones, test your page again.

Regarding title alignment, you can use custom css code below:

body.page .hentry .title-post {
    text-align: center;
}

Apply the code from theme style.css file, or you can use this plugin https://wordpress.org/plugins/simple-custom-css/

Best Regards!

Thanks Dimik!

Let me try everything you suggested and will then get back to you with the progress :).

Regards
Divya

Of course Divya,

Let me know how it turned out.

All the Best!

Hi Dimik,

Firstly my sincerest apologies for replying so very late. It’s just that my site has been acting up thanks to my hosting provider. Plus was caught up with getting some other tech integrations for my website.

Secondly…it worked! it worked!!..Thank you so very much :)! I removed the code from the parent file and added the code you gave me to the style.css file.

As for website loading time…I have used the WP smush and also another performance enhancer plugin. Will continue to work on that.

Thank you so very much for your help!!

Regards
Divya

Hi Dimik,

I was kind of forced to open this topic again. The code you gave worked perfectly to centre align the title and for a brief period the jumping stopped but it’s BACK now.

I increased the Page wrapper top padding to 125 under the ‘General Section’ under theme customization. By doing this, when the page loads, it starts at the right position but once the page finishes loading it jumps right back up under the Page header image.

I had upgraded the Sydney website with the new version which would have obviously deleted the old code which I put under the bootstrap.css.

Again wondering why this is happening??

Your help would be much appreciated :slight_smile:

Regards
Divya

Hello again Divya,

I checked referred page again, and images are optimized, but page loading time is still long, from 13 - 20 seconds depending of place from where it is accessed. As you can see on waterfall tab https://gtmetrix.com/reports/beyondinary.com/rWskwBRl, server waiting time is 11 seconds. I can suggest you to try to disable additional scripts / plugins in order to see, if some of them is causing this delay, and also to try to optimize site for speed. Here are some general tips for speeding up your website:

  1. You can check how to optimize your website here: (in this part, minimization of those files will be mentioned): https://gtmetrix.com/

  2. Optimize your images with some tool:
    www.jpegmini.com/

  3. Also you can install some plugin for cache, like WP Fastest Cache:

or premium one http://wp-rocket.me/

  1. You can enable gzip compression on your server. You should paste this code to .htaccess file located in your folder:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>​

http://www.feedthebot.com/pagespeed/enable-compression.html

  1. Leverage browser caching:
    http://www.feedthebot.com/pagespeed/leverage-browser-caching.html

  2. Use ate least PHP 5.4.x or greater in order to process PHP code faster​, and to fix older version bugs. Note that wordpress is now recommending​ PHP 5.6 or greater https://wordpress.org/about/requirements/​

If that does not help, you can only try to migrate site to some other host in order to see if it will be better. Try to search to hosting companies which offer free test period or money back.

Best Regards!

Hi Dimik,

I did almost everything you suggested to improve my website performance in general and also the issue seems to be resolved for now :slight_smile:

Again thank you so very much for your help!!

Divya

Hi Dimik,

I am sorry to have to open this thread again. It’s just that the issue has cropped up again. Can you please look at it.

For all the pages apart from the home page the Page Title first loads much below the menu strip and then jumps back up closer to it. This does not happen when the page is loaded from cache where there is too much gap between the menu strip and the page title which is not ideal, I want it to render with the lesser gap. Now, when I open it under incognito window then this jumping happens and it kind of settles as per my settings.

The setting I have done is - Customize -> General -> Page wrapper - top padding -> I have set it to 150 here. Whatever the page load time can it not jump position like that??

Thanks so much in advance!
Divya

Hi again,

I understand your eager to perfection on this topic but please understand that this is not a theme issue and I am not in position to chase this whenever it occurs on your side. It is simple server loading thing, and hosting server apparently have some visit peaks when page is rendered slower. Exact same markup is present on demo page here here http://demo.athemes.com/bistro/about/ and as you can see on tests it is much faster hosting and loading speed https://gtmetrix.com/reports/demo.athemes.com/CGwXbYBc so this does not happen. You can only try to optimize page for speed like suggested previously or try migrating to another host.

Best Regards!

Appreciate your prompt response Dimik!

I understand that it could be related to page load time. Just to make sure though could you do me a favour and see if there may be any other conflicts or issues (maybe with code) on my website which may be leading to this. (I did use the code given by the team here to make the page title appear in the centre)

If you say no then I will close this thread and continue to work on the page load time :slight_smile:

Thanks so much
Divya

Hi again,

I can check css code, but you have to disable caching / minification plugins so currently it is impossible to see from which file styles are getting loaded.

Let me know when they are disabled.

Best Regards!

Hi Dimik,

The plugin is now disabled

Regards
Divya

Hi again Divya,

I checked your site and custom css is not altering vertical position of the title so this is not caused by your additional css code - see video where all additional css is removed http://screencast.com/t/b7srwyiLy . This is strictly related to page speed and your host, so if you are not able to optimize site for speed in order to overcome this you should consider changing your host.

Best Regards!

Thanks Dimik for checking it out. I’ll see what I can do for speed and perhaps host too.

Again appreciate your help!

Regards
Divya