themevision

Hello,@vietaly!

What header style do you use?

For the HeaderV2, insert the following code into Customizing->General->Additional CSS:

.site-header h1, .site-header h2 {
	text-align: center;
}

https://prnt.sc/lsyjlz

Regards

• This reply was modified 7 years, 5 months ago by themevision.

Hi,@minhluyen!

Here is the working solution for you:

First, you need to find the specific page ID number on the page which you want to apply the custom logo image.

to discover the page id, please follow the steps below :

1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

You can check THIS video guide

then, Open the Customizing->General->Additional CSS
and Copy/Paste the code below for every page you want to change the logo image and replace the page ID and URL to the image for each page.

.page-id-2 #agama-header-image  {
 content: url('https://png2.kisspng.com/20180326/afe/kisspng-light-blue-aqua-azure-turquoise-header-5ab8e7333e7a15.2113121115220672512559.png'); 
}

Regards

Hello,@minhluyen!

Unfortunately, that option exists in the Agama-Pro theme only.

Regards

Hello,
Insert the following code into Customize->General->Additional CSS:

#primary { 
    margin-right: auto!important;
    margin-left: auto!important;
    float:none;
    padding-right:0px!important;
    width:80%
}

Change the width value per your needs.

Regards

Hello,@satelit1978!

Insert the following CSS code into Customizing->General ->Additional CSS:

div#main {
    min-height: 1000px!important;
}

Regards

Hi,@martindrz!

In order to have a shrinking header, add next code additionally:

.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
    width: 93px;
    height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

Change the width and height values per your needs.

Also, insert this lines into the code I give you earlier:

-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;

so, in the end, your whole code per page should look like this:

.page-id-62 .pull-left  a img{
    display: none;}
.page-id-62 .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 250px;
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
}

.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 93px;
  height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

https://prnt.sc/lj9udi

Regards

• This reply was modified 7 years, 6 months ago by themevision.

Hello, @satelit1978!

Change your header style to the “V2”, then
Insert the next code into Customizing->General->Additional CSS:

#masthead.header_v2 hgroup {
    text-align: center;
}

The mobile menu does not move due to the Custom CSS code that you added.
https://prnt.sc/litaqk
Remove this code if you want to scroll the menu.

Regards