Clickable Logo in Header in Artisteer 4 (a working solution)

<a href="http://www.example.com"><img src="http://www.example.com/image.jpg"></a>

 .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover 

 { 

 z-index: -1; 

 } 

Quote Mark C:

2) Make the title invisible. You do this by decreasing the z-index of your headline. The following CSS code can be added to the Export Options > CSS Options > Additional CSS Styles field:

 .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover 

 { 

 z-index: -1; 

 } 

This will mean that your site will still have a Title and, so, the <H1> tag will remain for SEO purposes, but you'll also have a clickable logo in your header.

Quote Dude:

Looks good but how do you make the image or logo in the header appear when using its responsive feature...when you use a mobile or collapsethe width of your browser window.

When I do this it always disappears.

Quote Pekka M:

One trick to avoid the image disappear in the mobile phone is to make a background-image, which covers the whole header. Then I changed the css-code of header:

Quote mightec:

Quote Pekka M:

One trick to avoid the image disappear in the mobile phone is to make a background-image, which covers the whole header. Then I changed the css-code of header:

This seems a great solution, but does it matter what size the original header is, e.g. 1000 px

Quote mightec:

Pekka M
Viewed the website, looks very good, thanks for information. I have tried it, but cannot get the background image to resize.

If I tell you what I did, then perhaps you can tell where I am going wrong.

I imported a new header image and resized the header to fit the image. I then copied and pasted your code into the export, CSS Options section as additional CSS. This maybe where I am going wrong, should I chnage the template.css file?

Quote Mark C:

After some back and forth with Artisteer Support, "we" have come up with this solution to have a clickable logo in the header area of your Artisteer site. You need Artisteer 4 for this to work.

Two solutions I had proposed:
1) Instead of typing in a title, allow users to upload an image from file which will have the same clickable properties as a title
2) Put in a "normal" header image, place the title where the logo part of that image is and allow users to make the title transparent - this feature has now been added to the wishlist for future versions - so in future, you might be able to have a Title with 50% transparency, for example, or 100%, etc.

So, the solution:

1) Use the new Header Shapes feature available in Artisteer 4. Add a shape and place an image inside it by editing the shape's HTML (Right click > Edit Source HTML). Make this image into a link and place it on top of the website title. The source code will look something like this:

<a href="http://www.example.com"><img src="http://www.example.com/image.jpg"></a>

2) Make the title invisible. You do this by decreasing the z-index of your headline. The following CSS code can be added to the Export Options > CSS Options > Additional CSS Styles field:

 .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover 

 { 

 z-index: -1; 

 } 

This will mean that your site will still have a Title and, so, the <H1> tag will remain for SEO purposes, but you'll also have a clickable logo in your header.

Quote Mark C:

After some back and forth with Artisteer Support, "we" have come up with this solution to have a clickable logo in the header area of your Artisteer site. You need Artisteer 4 for this to work.

Two solutions I had proposed:
1) Instead of typing in a title, allow users to upload an image from file which will have the same clickable properties as a title
2) Put in a "normal" header image, place the title where the logo part of that image is and allow users to make the title transparent - this feature has now been added to the wishlist for future versions - so in future, you might be able to have a Title with 50% transparency, for example, or 100%, etc.

So, the solution:

1) Use the new Header Shapes feature available in Artisteer 4. Add a shape and place an image inside it by editing the shape's HTML (Right click > Edit Source HTML). Make this image into a link and place it on top of the website title. The source code will look something like this:

<a href="http://www.example.com"><img src="http://www.example.com/image.jpg"></a>

2) Make the title invisible. You do this by decreasing the z-index of your headline. The following CSS code can be added to the Export Options > CSS Options > Additional CSS Styles field:

 .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover 

 { 

 z-index: -1; 

 } 

This will mean that your site will still have a Title and, so, the <H1> tag will remain for SEO purposes, but you'll also have a clickable logo in your header.

Quote mightec:

Quote Pekka M:

One trick to avoid the image disappear in the mobile phone is to make a background-image, which covers the whole header. Then I changed the css-code of header:

This seems a great solution, but does it matter what size the original header is, e.g. 1000 px

Quote Mark C:

After some back and forth with Artisteer Support, "we" have come up with this solution to have a clickable logo in the header area of your Artisteer site. You need Artisteer 4 for this to work.

Two solutions I had proposed:
1) Instead of typing in a title, allow users to upload an image from file which will have the same clickable properties as a title
2) Put in a "normal" header image, place the title where the logo part of that image is and allow users to make the title transparent - this feature has now been added to the wishlist for future versions - so in future, you might be able to have a Title with 50% transparency, for example, or 100%, etc.

So, the solution:

1) Use the new Header Shapes feature available in Artisteer 4. Add a shape and place an image inside it by editing the shape's HTML (Right click > Edit Source HTML). Make this image into a link and place it on top of the website title. The source code will look something like this:

<a href="http://www.example.com"><img src="http://www.example.com/image.jpg"></a>

2) Make the title invisible. You do this by decreasing the z-index of your headline. The following CSS code can be added to the Export Options > CSS Options > Additional CSS Styles field:

 .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover 

 { 

 z-index: -1; 

 } 

This will mean that your site will still have a Title and, so, the <H1> tag will remain for SEO purposes, but you'll also have a clickable logo in your header.

Quote Kameelean:

Quote Mark C:

1) Instead of typing in a title, allow users to upload an image from file which will have the same clickable properties as a title

This is a great solution as everyone is saying, I also did a slight variation by creating a Click to Call option by using the following code:

<a href="tel:01234123456"><img src="http://www.yourwebsite.com/images/header.jpg"></a>

It works just great, lets the user call the website.

Quote Pekka M:

One trick to avoid the image dissappear in tht mobile phone is to make a background-image, which covers the whole header. Then I changed the css-code of header:

.responsive .art-header
{
max-width:100%;
height: auto;
min-width:320px;
min-height: 80px;
background-position: left center !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}

That works and the header image does not dissappear.

Quote :

.responsive .art-header { max-width:100%; height: auto; min-width:320px; min-height: 80px; background-position: left center !important; background-size: 100% !important; background-repeat: no-repeat !important; }