Keep header Contact info bar fixed on scroll

Sydney Pro
#1

Hello

I have enabled Customising > Extra options Header contact info > Activate the header contact info? but it will it would be nicer if it stayed fixed so I could display important information I want people to see.

My first question is how do I lock the bar in place? Secondly, how do add custom text on the left side (where the email is located), as I would like to add an announcements panel?

website > https://thesurgenetwork.net
Many thanks

Will

#2

Hello Will,

To accomplish those two, please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
jQuery(function($) {

  if( $('.header-contact').length ) {
     $('.header-contact').remove().clone().prependTo('.site-header');
  }

  // Add extra text to header contact area

  var myText = 'Your text goes here';

  $('.header-contact-info').prepend('<span class="header-contact-info-text">'+myText+'</span>');

});

4 . Update
5 . Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

.site-header {
  margin-top: 0 !important;
  padding-top: 0;
}

.site-header .header-contact,
.has-hero .site-header .header-contact {
  position: static;  
  margin-bottom: 20px;
}

.site-header.float-header .header-contact {
  margin-bottom: 5px;
}

.header-contact-info-text {
  display: inline-block;
  margin-right: 20px;
}

6 . Clear site cache (if applied). Otherwise this code addition won’t take any effect.

If you have any questions in the future, please avoid asking multiple queries at once. One topic should represent one question. You’re allowed to open unlimited topics.

Regards,
Kharis

How to make header menu connect with extra header menu
#3

Thank you for the response. Sorry it has taken a while to get back to you. The custom Jquery works lovely. I have some questions about tweaking it further. I’ll make a new post which can be found here

Many thanks

Will

#4

Hi Kharis

For some reason, any page except the homepage seems to display incorrectly. There is a
’{ top: 123px; }’ parameter that is pushing the entire header area down. I added the CSS to my child theme’s style.css and set it to 0px which fixed all of the pages, but when I went back to the homepage and it has moved above the top of the screen.

Additionally, the header contact background matches the same color as the site header, however going over to another page other than the home page reveals a black header contact background instead. How would I get it to match the header like it currently does on the home page?

Many thanks

Will

#5

Hi Kharis

Could I get some help with this please?

Will

#6

Hello there,

I am sorry for the long delay. Please try adding this extra CSS code and see if it helps:

    .header-contact-info {
      width: 100% !important;
    }

    body .admin-bar.no-hero .site-header.fixed,
    body .admin-bar.no-hero .site-header.float-header.fixed,
    body .site-header {
      top: 0 !important;
    }

Regards,
Kharis

#7

Hi Kharis

Thanks for the reply. I’ve managed to resolve the gap on other pages but now the #wpadminbar is overlapping the contact bar. Is there a way to shift everything down when the adminbat is present?

This is the code I have in my child theme style sheet:

/*--------------------------------------------------------------
Contact Header
--------------------------------------------------------------*/
.header-contact-info {
	width: auto !important;
}
.header-contact {
	padding: 5px;
}
#menu-social {
	width: auto !important;
}
/*Non-homepage pages*/
body .admin-bar.no-hero .site-header.fixed,
body .admin-bar.no-hero .site-header.float-header.fixed, body .site-header {
	top: 0 !important;
}

.site-header .header-contact,
.has-hero .site-header .header-contact {
  position: static;  
  padding-bottom: 5px;
	padding-top: 5px;
}
.site-header.float-header .header-contact {
  padding-bottom: 5px;
	padding-top: 5px;
}
:not(.float-header).site-header .header-contact, .header-contact {
	background-color: transparent !important;
}
.float-header.site-header .header-contact, .header-contact {
	background-color: transparent !important;
}
/*Font Colors*/
:not(.float-header) .has-hero .header-contact, .has-hero .header-contact a {
	color: red;
}
.float-header .has-hero .header-contact, .has-hero .header-contact a {
	color: green;
}

With the colors of the contact bar matching header on scroll, I would also like the font colors to change when the header area is either at the top or floating. So far the code makes non & and floating header green but should be indeed red as shown in the code. I also noticed the ‘a’ links are not affected. Could you help me out here please?

Many thanks

Will

#8

Thank you for getting back Will.

Please try adding this extra CSS code:

    @media only screen and (min-width: 1025px) {

      .logged-in .site-header,
      .logged-in .site-header.fixed {
        margin-top: 32px;
      }
      
    }

Regards,
Kharis