Perth header

Hi there :slight_smile:
I love Perth :з
But i have a question
i created new site and now want to customize header a little bit
ege100ballov.com
i want to raise header text and place the buttons lower and put between them 2 square fields with prices


a

Hello there,

Thank you for getting in touch.

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

.header-info{
  top: 0;
  bottom: 0;
}

.header-text{
  width: 100%;
  position: absolute;
}

.header-buttons{
  width: 100%;
  position: absolute;
  text-align: center;
}

.header-button{
  display: inline-block;
  float: none;
}

.header-text{
 top: 100px; 
}  

.header-buttons{
 bottom: 100px; 
}  

You should need to adjust the top value of .header-text and the bottom value of .header-buttons.

Regards,
Kharis

TY Kharis but how i can add additional 2 boxes with text in a space between them&
http://ege100ballov.com/

or buttons maybe

still waiting :frowning:

Hello there,

I would like to apologize in advance for the delayed reply.

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box

https://gist.githubusercontent.com/kharissulistiyo/0fb73caed47b2c508b02/raw/49d2ecc54f084de26396d701a2816eaf4743b964/js.html

You should adjust the content as needed.

  1. Save settings

  2. Apply the following CSS code through Simple Custom CSS plugin

.new-header-content{
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

I hope it helps.

Regards,
Kharis

TY Kharis ^__________^
The lasssst question
How to fix their placement and how i can increase font size of the 1st and 3d strings


SRY ((

Hello there,

To fix their placement, try to apply the following CSS code.

.new-header-content{
  display: table;
  position: relative;
  height: 100%;
  z-index: 3 !important;
}

.new-header-content .header-buttons{
  position: relative;
  display: table-cell;
  vertical-align: middle;
  bottom: auto;
}

.header-buttons{
  z-index: 4 !important;
}

.new-header-content .header-buttons{
 z-index: 2 !important; 
}  

> … how i can increase font size of the 1st and 3d strings

You should wrap each string inside a SPAN tag <span></span>, then apply he following CSS code.

.new-header-content .header-buttons span:first-child{
  font-size: 26px;
}  

.new-header-content .header-buttons span:last-child{
  font-size: 26px;  
}  

Regards,
Kharis

they still together i need to divide them to 2 different and make them be unclickable

Hello there,

You should need to change the A tag to DIV. Then apply the following CSS code.

.new-header-content .header-buttons > div{
  display: inline;
  padding: 15px 30px;
  max-width: 262px;
  background-color: #315B9D;
  border: 2px solid #315B9D;  
  color: #fff;
}  

.new-header-content .header-buttons > div:hover{
  background: transparent;
}  

.new-header-content .header-buttons > div:first-child{
  margin-right: 10px; 
}

.new-header-content .header-buttons > div:last-child{
  margin-left: 10px; 
}  

Regards,
Kharis

There?
<script>
(function($){
$(document).ready(function(){
“use strict”;

      var $newContent = '&lt;div class="new-header-content"&gt;'+
                          '&lt;div class="header-buttons"&gt;'+
                            '&lt;DIV class="button header-button left-button" href="#primary"&gt;&lt;span&gt;ЕГЭ/ГИА&lt;/span&gt;&lt;br&gt; Стандартная программа&lt;br&gt; 8000/месяц&lt;/DIV&gt;'+
                            '&lt;DIV class="button header-button left-button" href="#primary"&gt;&lt;span&gt;ЕГЭ/ГИА&lt;/span&gt;&lt;br&gt; Расширенная программа&lt;br&gt; 9500/месяц&lt;/DIV&gt;'+
                          '&lt;/div&gt;'+              
                        '&lt;/div&gt;';
      
        $('.header-info').append($newContent);

});
})(jQuery);
</script>

Animation still work and if i try to <br> they just become divided

The code should look like the following

https://gist.githubusercontent.com/kharissulistiyo/0fb73caed47b2c508b02/raw/653ab6554a27e66b2498803918cc91ab9279131a/js.html

Regards,
Kharis

i change 1 string and still

Already tried 100000 of combos :frowning:

Kharis :frowning:

Hello there,

I would like to apologize in advance for responding slowly.

Could you confirm if you have applied this CSS code and your JS code looks like this?

Regards,
Kharis

Header and footer

<script>
(function($){
     $(document).ready(function(){
         "use strict";

          var $newContent = '<div class="new-header-content">'+
                              '<div class="header-buttons">'+
                                '<div><span>ЕГЭ/ГИА</span><br> Стандартная программа<br> 8000/месяц</div>'+
                                '<div><span>ЕГЭ/ГИА</span><br> Расширенная программа<br> 9500/месяц</div>'+
                              '</div>'+              
                            '</div>';
          
	        $('.header-info').append($newContent);
				 
 });
})(jQuery);
</script>

Custom CSS 


.fact{
border: none;
-webkit-transition: unset;
transition: unset;
}

.fact:hover {
background: transparent;
border: none;
}
#meta-2.widget {
display: none;
}
#categories-2.widget{
display: none;
}

.header-info{
top: 0;
bottom: 0;
}

.header-text{
width: 100%;
position: absolute;
}

.header-buttons{
width: 100%;
position: absolute;
text-align: center;
}

.header-button{
display: inline-block;
float: none;
}

.header-text{
top: 100px;
}

.header-buttons{
bottom: 100px;
}

.new-header-content{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}

.new-header-content{
display: table;
position: relative;
height: 100%;
z-index: 3 !important;
}

.new-header-content .header-buttons{
position: relative;
display: table-cell;
vertical-align: middle;
bottom: auto;
}

.header-buttons{
z-index: 4 !important;
}

.new-header-content .header-buttons{
z-index: 2 !important;
}

.new-header-content .header-buttons span:first-child{
font-size: 26px;
font-weight: 150;
}

.new-header-content .header-buttons span:last-child {
font-size: 26px;

}

.new-header-content .header-buttons > div{
display: inline;
padding: 15px 30px;
max-width: 262px;
background-color: #315B9D;
border: 2px solid #315B9D;
color: #fff;
}

.new-header-content .header-buttons > div:hover{
background: transparent;
}

.new-header-content .header-buttons > div:first-child{
margin-right: 10px;
}

.new-header-content .header-buttons > div:last-child{
margin-left: 10px;
}

Or


And