I upgraded to 8.0 of salient and the page header titles and subtitles now do not appear correctly.
The top align looks like a middle align, and the middle and bottom align makes the title and subtitle text appear cropped at the bottom of the header image. The cropping is a little more odd also in mobile view.
After adding the CSS, the top alignment now crops the title at the top.
Can you explain why this is happening and why a custom CSS should be required? I ask as there are different variations of title and subtitle alignments throughout the site which worked before the 8.0 update but I have to now find a way of getting them all visible?
Thank you for that. I've updated the child theme header to keep things up to date and in general middle alignment seems to work OK for page title and subtitles, but it would be good, for all, to have a proper fix so that the top and bottom alignments work OK.
I added the class="no-js" to the header, cleared the cache both on browsers and SitegGround hosting and the header vertical alignments are still an issue at the links below.
That's odd - I did those changes before I posted the last message and they are appearing here but the code, for the <html... tag that you are seeing is different. See here ...
I use SiteGround for hosting and they have a supercacher which flushed for the domain and also did a master flush (see attached snapshot).
Since your last message, I was quite sure that I am not suing a CDN but I asked SiteGround anyway and they have just got back to me to confirm that there is no CDN for the domain.
I looked into it and thought it was a custom issue issue only as when I removed all my custom CSS, it appeared OK on the laptop. However when I reduced the width of the browser to simulate the mobile view, the text appeared off the top of the image header. I have also checked it on an actual mobile.
So, the issue seems to be only with top alignment of the title and subtitles on mobile view.
Thanks for that - it helps and I should be able to customise the CSS for it to appear better with the fonts and line-heights I am using for the titie and subtitle, but when you take out all custom CSS and just put in your last CSS, the top and middle vertical alignment settings appear the same on mobile view. You may want to resolve that in a future release.
Hello,
I upgraded to 8.0 of salient and the page header titles and subtitles now do not appear correctly.
The top align looks like a middle align, and the middle and bottom align makes the title and subtitle text appear cropped at the bottom of the header image. The cropping is a little more odd also in mobile view.
See below for the different aligns:
Top align:
https://karavadra.net/gift/
Middle align:
https://karavadra.net/gift2
Bottom align:
https://karavadra.net/gift3
The mobile views are attached.
I also removed all CSS customisations but that did not make any difference.
Could you please look into this?
Thank you,
Bharat
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
html:not(.js) #page-header-bg .span_6 { margin-top: 0px !important; }Thanks
ThemeNectar Support Team
Hello Tahir,
After adding the CSS, the top alignment now crops the title at the top.
Can you explain why this is happening and why a custom CSS should be required? I ask as there are different variations of title and subtitle alignments throughout the site which worked before the 8.0 update but I have to now find a way of getting them all visible?
Thank you,
Bharat
Hey Again,
There seems to be new functionality added so it could be a bug . Assigning it to the Developer so this can be looked into for upcoming updates.
Be.st
ThemeNectar Support Team
OK Tahir,
I have had to re-align the first link after adding your code so please ask the developers to use these links:
Top align:
https://karavadra.net/gift1
Middle align:
https://karavadra.net/gift2
Bottom align:
https://karavadra.net/gift3
How would I know when this is looked at?
Thank you,
Bharat
Hey
Please have a look at this Article :Salient 8.0 Child Theme Issues
Thanks
ThemeNectar Support Team
Thank you for that. I've updated the child theme header to keep things up to date and in general middle alignment seems to work OK for page title and subtitles, but it would be good, for all, to have a proper fix so that the top and bottom alignments work OK.
Regards,
Bharat
Hey Again,
The Alignment on all pages were due to the Child Theme Header Issue .
Please clear your cache using this guide: Clear Cache where applicable .
Best.
ThemeNectar Support Team
Hello,
I added the class="no-js" to the header, cleared the cache both on browsers and SitegGround hosting and the header vertical alignments are still an issue at the links below.
Thank you.
Hey Again,
I cant seem to view the no-js class in the html tag , so your changes havent gotten applied .
ThemeNectar Support Team
Hello Tahir,
That's odd - I did those changes before I posted the last message and they are appearing here but the code, for the <html... tag that you are seeing is different. See here ...
Thank you,
Bharat
Your CDN cache likely needs to be flushed . Are you running a CDN ?.
ThemeNectar Support Team
Hello Tahir,
I use SiteGround for hosting and they have a supercacher which flushed for the domain and also did a master flush (see attached snapshot).
Since your last message, I was quite sure that I am not suing a CDN but I asked SiteGround anyway and they have just got back to me to confirm that there is no CDN for the domain.
Thank you,
Bharat
Hey Again,
Does switching to the Parent Theme Resolve the Issue . That way we can confirm that the Child Theme header.php is at fault ?.
Thanks
ThemeNectar Support Team
Hello Tahir,
I just tried switching it to the main parent Salient theme, flushing the cache and that does not resolve the issue.
Thank you,
Bharat
Hey Again,
You only seem to have reported this so its likely custom css or some plugin .
Could you please go through this checklist quickly so we can rule out common issues https://themenectar.ticksy.com/article/5032/ .
Best.
ThemeNectar Support Team
Hello Tahir,
Thanks for that - I won't go through the details but I worked out eventually that it's custom CSS. If I delete all the custom CSS it's OK.
The custom CSS and header title/subtitle appearances was OK before the v8.0 update, so can you help work out what specifically it could be?
Thank you,
Bharat
Tahir,
Ignore the last message - it's not the custom CSS - let me do some more testing and I will get back to you.
Thank you,
Bharat
Tahir,
I looked into it and thought it was a custom issue issue only as when I removed all my custom CSS, it appeared OK on the laptop. However when I reduced the width of the browser to simulate the mobile view, the text appeared off the top of the image header. I have also checked it on an actual mobile.
So, the issue seems to be only with top alignment of the title and subtitles on mobile view.
See this video:
Thank you,
Bharat
After some rigorous testing it seems like a css glitch .
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) { #page-header-bg[data-parallax="1"][data-alignment-v="top"] .span_6 { top: 30%!important; } }Thanks
ThemeNectar Support Team
Tahir,
Thanks for that - it helps and I should be able to customise the CSS for it to appear better with the fonts and line-heights I am using for the titie and subtitle, but when you take out all custom CSS and just put in your last CSS, the top and middle vertical alignment settings appear the same on mobile view. You may want to resolve that in a future release.
Thank you,
Bharat