Title not Sticky after Header php modifications

http://www.thewaterfront.co.in/

Hi,My Site Title Not getting stick after I added my email and phone no. in WP Header.php file.
During Scroll Title disappears.

Hi,

You can fix the site title issue after adding your contact details with this Custom CSS:

.site-title {
    position: relative !important;
    z-index: 9999 !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Thanks for the Title solution , it is working now for desktop and Tab , however in Mobile it is not working , overlapping also ,‘Go to top’ And Social button going out of frame , need to zoom out.
Regards
Bajpai

My Custom CSS now is for Go to top and social menu responsive changes :

slight_smile:.site-title {

position: relative !important;

z-index: 9999 !important;

}

@media all and (min-width:1200px) and (max-width:8000px){
.page-template-page_front-page .page-wrap {
padding-top: 125.717px !important;
}
position: fixed !important;
}
.site-header.fixed {
position: fixed !important;
}
.admin-bar .site-header{
position: fixed !important;
}

}
@media all and (min-width:992px) and (max-width:1199px){
.page-template-page_front-page .page-wrap {
padding-top: 109.85px !important;
}
}
@media all and (min-width:768px) and (max-width:991px){
.page-template-page_front-page .page-wrap {
padding-top: 140px !important;
}
}
@media all and (min-width:1px) and (max-width:777px){
.page-template-page_front-page .page-wrap {
padding-top: 183px !important;
}
}

Hi,

What I can see it is overlapping is your contact info which was added inside the header wrapper, so it’s on the same line as the logo, please wrap your code in a custom div like:

<div class="my-contact-info">your-code-here</div>

and let me know then, so I can give you a Custom CSS to control the contact info separately and move it above your site-title.

Kind Regards,
Csaba

Hi.

Not working , Header wrapper additional code is as follows after wrappin as per above instruction ;

face="Courier New" color="##ff0000"> &#9742 Call 9833767775/8830690900&nbsp 

<font size=“4”    face=“Courier New bold” color="#4073DE">&#9993 info@thewaterfront.co.in   

Pls check .Need these info in header .
Let me know Custom CSS , I am non programmer user.
Regards

Bajpai

Hi,

Thank you for adding them in a div, now you can style and move your contact info area on mobile devices with this Custom CSS:

@media only screen and (max-width: 767px) {
.my-contact-info {
    margin-top: 30px;
    text-align: center;
}

.my-contact-info span {
    float: none !important;
}

.site-description {
    margin-top: 60px !important;
}
}

On smaller devices where the contact info overlaps your site description you can apply this Custom CSS to move the site description lower:

@media only screen and (max-width: 480px) {
.site-description {
    margin-top: 90px !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Thanks .
No difference obsered , working Good in Desktop & 10 inches TAB , however in Mobile , Title overlapping contact info , also bigger problem is NOT visible, all customer mainly access site on Mobile.
Custom CSS is long without above reply code , pls review.
Purpose:
Sticky Social on Right should be within Mobile
Go to Top should be within Mobile
Contact info No overlapp , even Site description Not visible is acceptable.

Regards

Bajpai
.site-title {

position: relative !important;

z-index: 9999 !important;

}

html,
body {
overflow-x: hidden;
}

.go-top.show {
  border-radius: 0;
}

@media all and (min-width:1200px) and (max-width:8000px){
.page-template-page_front-page .page-wrap {
padding-top: 125.717px !important;
}
position: fixed !important;
}
.site-header.fixed {
position: fixed !important;
}
.admin-bar .site-header{
position: fixed !important;
}
}
@media all and (min-width:992px) and (max-width:1199px){
.page-template-page_front-page .page-wrap {
padding-top: 109.85px !important;
}
}
@media all and (min-width:768px) and (max-width:991px){
.page-template-page_front-page .page-wrap {
padding-top: 140px !important;
}
}
@media all and (min-width:1px) and (max-width:777px){
.page-template-page_front-page .page-wrap {
padding-top: 183px !important;
}
}

Header PHP

<font size=“3” &#9742 ;face=“Courier New” color="#ff0000"> &#9742 Call 9833767775/8830690900&nbsp 

<font size=“4”    face=“Courier New bold” color="#4073DE">&#9993 info@thewaterfront.co.in   

Mobile screen shot attached.

Sorry , Forgot to add that in TAB size 10 inches , Menu not appearing .Else all ok.

Regards

Bajpai

Hi,

Please remove your other CSS temporarily and only add the CSS I gave you and let me know how it works then. If the issue still persists, please give me an admin access to your website in a Private Message, so I can inspect this issue further in your admin dashboard.

Kind Regards,
Csaba

1 Like

Thanks,
Removed CSS for making header fixed in Mobile , Tab mode .
Comfortable with present view with my contact info in header.
Desktop : Contact info, Menu also Header is sticky.all fine.
TAB , Mobile contact info now not overlapping , but header Not sticky , acceptable ,as Full slider is visible on mobile.

Regards

Hi,

Now please re-apply your CSS at the bottom of mine and if it breakes, then please take out classes one-by-one to see which bit crashed the code and post it there, so if that is needed I will make it to don’t affect your other CSS in a bad way.

Kind Regards,
Csaba