Issues wih the sticky header in pc and mobile

As you can see on the front page is www.unitedstudy.co.uk
and EVERY page but it does not shrink like the homepage is www.unitedstudy.co.uk/apply/
. whenever you scroll down, the header bounces after scrolling exposing a white background under it for a moment and whenever you scroll up.

On mobile, it also takes up way too much space, i would like to move it like this
https://forums.athemes.com/uploads/db8325/original/2X/2/215a491b2a67088f1250ae9be7fc776fd1278b0e.jpeg

Hi,

Maybe this code can fix the issue:

.header-clone {
    background-color: black;
}

Please add the code to Customize > additional CSS.

Regards,

hi Awan,

It is still exactly the same


As you can see, the header is also inconsistent on my pages too. I wanted all of them to shrink like my home page. But even my home page has the weird bounce issue

Hi,

Please try this code. The code below should manage the icon and position of the header element when in mobile screen.

Please take a note about your social media links:

  • Skype: the URL should contains skype text. e.g: skype:YOUR NUMBER OR YOUR SKYPE ID
  • Email: the correct URL for the mail link is mailto:YOUR EMAIL ADDRESS

Here is the CSS code:

.header-clone {
    height: auto !important;
}
.social-links a[href*="skype"]::before {
    content: "\f17e";
}
.social-links a[href*="mailto"]::before {
    content: "\f0e0";
}
.social-links a[href*="apply"]::before {
    content: "\f04b";
}
@media (max-width: 767px){
  .header-contact {
    padding-top: 50px;
  }
  .header-contact .top-menu-cta {
    top: -100px;
    position: relative;
  }
  nav.social-navigation {
    height: 25px;
  }
  .site-header .col-md-4.col-sm-8.col-xs-12 {
    width: 40%;
    text-align: left;
  }
  .site-header .col-md-8.col-sm-4.col-xs-12 {
    width: 60%;
  }
  .site-header .col-md-8.col-sm-4.col-xs-12 .btn-menu {
    float: right;
    margin-right: 10px;
    margin-top: 30px;
  }
  #mainnav-mobi {
    top: 50px;
  }
}

Regards,

thanks but it did not seem to change anything. it looks the same

    .text-slider .maintitle, 
    .text-slider .subtitle {
       text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8);
    }

    .header-contact-info a,
    #mainnav ul.menu > li > a {
      text-shadow: 4px 3px 6px rgba(5, 6, 6, 1.6);    
    }


    .header-contact .top-menu-cta {
      font-size: 5px;
    }

    .header-contact .top-menu-cta.button2 {
      margin-left: 15px;
    }

#masthead.fixed {
    background-color: rgba(0,0,0,0.9);
    padding: 10px;
}

.btn-menu {
    line-height: 1;
}

#masthead.fixed .site-logo {
    max-height: 55px;
}

.site-logo {
    transition-duration: 0.5s;
}

    @media only screen and (min-width: 1025px) {
      .header-contact .header-contact-info {
        width: 210px;
      }
      .header-contact .header-contact-info .header-email {
        float: left;
      }
      .header-contact .social-navigation > div > ul {
        margin-left: -125px;
        text-align: left;
        position: relative;
      }
      .social-navigation li.top-menu-cta,
      .social-navigation li.top-menu-cta.button2 {
        position: absolute;
        top: 0;
        right: 130px;
      }
      
			.social-navigation li.top-menu-cta.button2 {
        right: 0;
      } 
			
			    .social-navigation li:not(.top-menu-cta) a {

      text-shadow: 4px 2px 6px rgba(5, 6, 6, 1); 

    }

		.header-clone {
    background-color: black;
}
			
			
	

.header-clone {
    height: auto !important;
}
.social-links a[href*="skype"]::before {
    content: "info@unitedstudy.co.uk";
}
.social-links a[href*="mailto"]::before 
}
   content: "apply@unitedstudy.co.uk";
}
@media (max-width: 767px){
  .header-contact {
    padding-top: 50px;
  }
  .header-contact .top-menu-cta {
    top: -100px;
    position: relative;
  }
  nav.social-navigation {
    height: 25px;
  }
  .site-header .col-md-4.col-sm-8.col-xs-12 {
    width: 40%;
    text-align: left;
  }
  .site-header .col-md-8.col-sm-4.col-xs-12 {
    width: 60%;
  }
  .site-header .col-md-8.col-sm-4.col-xs-12 .btn-menu {
    float: right;
    margin-right: 10px;
    margin-top: 30px;
  }
  #mainnav-mobi {
    top: 50px;
  }
}

Is there any help? Awaiting a resolution please

Hello there,

Try replacing your code with this:

.text-slider .maintitle,
.text-slider .subtitle {
	text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8);
}

.header-contact-info a,
#mainnav ul.menu>li>a {
	text-shadow: 4px 3px 6px rgba(5, 6, 6, 1.6);
}

.header-contact .top-menu-cta {
	font-size: 5px;
}

.header-contact .top-menu-cta.button2 {
	margin-left: 15px;
}

#masthead.fixed {
	background-color: rgba(0, 0, 0, 0.9);
	padding: 10px;
}

.btn-menu {
	line-height: 1;
}

#masthead.fixed .site-logo {
	max-height: 55px;
}

.site-logo {
	transition-duration: 0.5s;
}

@media only screen and (min-width: 1025px) {
	.header-contact .header-contact-info {
		width: 210px;
	}
	.header-contact .header-contact-info .header-email {
		float: left;
	}
	.header-contact .social-navigation>div>ul {
		margin-left: -125px;
		text-align: left;
		position: relative;
	}
	.social-navigation li.top-menu-cta,
	.social-navigation li.top-menu-cta.button2 {
		position: absolute;
		top: 0;
		right: 130px;
	}
	.social-navigation li.top-menu-cta.button2 {
		right: 0;
	}
	.social-navigation li:not(.top-menu-cta) a {
		text-shadow: 4px 2px 6px rgba(5, 6, 6, 1);
	}
	.header-clone {
		background-color: black;
	}
	.header-clone {
		height: auto !important;
	}
	.social-links a[href*="skype"]::before {
		content: "info@unitedstudy.co.uk";
	}
	.social-links a[href*="mailto"]::before {
    content: "apply@unitedstudy.co.uk";
  }
}

@media (max-width: 767px) {
	.header-contact {
		padding-top: 50px;
	}
	
	.header-contact .top-menu-cta {
		top: -100px;
		position: relative;
	}
	
	nav.social-navigation {
		height: 25px;
	}
	
	.site-header .col-md-4.col-sm-8.col-xs-12 {
		width: 40%;
		text-align: left;
	}
	
	.site-header .col-md-8.col-sm-4.col-xs-12 {
		width: 60%;
	}
	
	.site-header .col-md-8.col-sm-4.col-xs-12 .btn-menu {
		float: right;
		margin-right: 10px;
		margin-top: 30px;
	}
	
	#mainnav-mobi {
		top: 50px;
	}
}

Regards,
Kharis

Hi, thanks for fixing the code!!

I looked at the new mobile header and i think the original in the centre logo/menu looks better. I just want to make it smaller so it takes up less space like this

Hi,

Remove this code to move back the logo and button menu to center:

.site-header .col-md-4.col-sm-8.col-xs-12 {
	width: 40%;
	text-align: left;
}
	
.site-header .col-md-8.col-sm-4.col-xs-12 {
	width: 60%;
}
	
.site-header .col-md-8.col-sm-4.col-xs-12 .btn-menu {
	float: right;
	margin-right: 10px;
	margin-top: 30px;
}

Then add this code to decrease the logo size:

.site-logo {
    height: 55px;
}

Also, please remove this:

.social-links a[href*="skype"]::before {
	content: "info@unitedstudy.co.uk";
}
.social-links a[href*="mailto"]::before {
    content: "apply@unitedstudy.co.uk";
 }

These social-links code will not be working at all. If you want to display the icon for your Skype, email, and apply URL, please follow my suggestion code above and update the URL format too.

Regards,

Hi awan. Thanks for the help so far!

Only want to change the mobile because the header takes up unnecessary space.!

For skype
I should add in my id live:info_462040

I added in the code

.header-clone {
height: auto !important;
}
.social-links a[href*=“skype”]::before {
content: “live:info_462040”;
}
.social-links a[href*=“mailto”]::before {
content: “\f0e0”;
}
.social-links a[href*=“apply”]::before {
content: “\f04b”;
}

I added but it didn’t show

Hi,

Trying to move the email to the center between the CTA button, but there is not enough space.
And if you decrease the font size of the buttons, you need to make it very small and I think thats not look good for your site. See this pict:
Screenshot_62

Here is how to display the icons:
But, firstly, please change your URL to

  • Skype: live:info_462040
  • Email: mailto:info@unitedstudy.co.uk

Then add this to Customize > additional CSS:

.social-links a[href*="live"]::before {
    content: "\f17e";
}
.social-links a[href*="mailto"]::before {
    content: "\f0e0";
}
.social-links a[href*="apply"]::before {
    content: "\f04b";
}

When you do it in the correct way, you will see the icons in centered.
Screenshot_63

Regards,

thank you, https://forums.athemes.com/uploads/db8325/original/2X/f/fc7ea4f082b402be5992877007e290e1fa7b78bc.png
Would it be possible to keep the email there for desktop but only remove it for mobile then?

And for getting the social media icons, could you please clarify what you mean by changing the URL? i don’t presume you mean the home page address.

I tried this in the additional css but i am guessing not this as it did not work

Skype: live:info_462040
.social-links a[href*=“live”]::before {
content: “\f17e”;
}

  • Email: mailto:info@unitedstudy.co.uk
    .social-links a[href*=“mailto”]::before {
    content: “\f0e0”;
    }
    .social-links a[href*=“apply”]::before {
    content: “\f04b”;
    }