Text instead of logo / Logo plus text - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
May 6, 2022 at 10:44 am #1350780
InSilentio
Participant
Hello,
i found several posts in this forum where you explain how to either:
– Show a text instead a logo
– add text near the logo

I tried a lot of them but none of them really work.

So please tell me how i realize this:
Logo & text & subtext

Specific:
```
<div class="container av-logo-container"><div class="inner-container"><span class="logo avia-standard-logo"><a href="https://www.website.de/" class=""><img src="https://website.de/logo.png" >
<span class="subtext avia-standard-logo-sub"></span></a><div id="headertext"><a href="https://www.website.de/">
					</a><a href="http://www.website.de"><h1>Topic<span> Companyname</span></h1></a>
					<span id="slogan">Add a slogan here</span>
				</div><div id="headerclaim">
				Here comes another text or claim
				</div></span>
```
This is something i found in another forumthread suggested by you but it does not work properly when it comes to smaller screensizes

kind regards
Elvira
May 8, 2022 at 1:14 am #1350913

Mike
Moderator

Hey InSilentio,
Please explain if you are asking for the text & subtext to be below the logo or next to the logo.
Typically the logo container is 90px high on desktops, are you thinking that the logo will be only 45px high to make room for the text and sub-text, or are you going to want the header larger to make room?
Typically since the mobile header and logo are already small the sub-text is hidden, is this what you mean by your solution not working on mobile?
Our documentation has an example, perhaps see this, but I have not seen an example of Logo & text & subtext, perhaps you could link to the solution that you found and your test site so we can see how small your header and logo image and text and sub-text is going to be.

Best regards,
Mike

May 9, 2022 at 8:47 pm #1351077

InSilentio
Participant

Hallo Mike
1: my testsite is still on a xampp/localhost, sorry.

2: A google search lead me to several threads with more or less different suggestions:
https://www.google.com/search?client=firefox-b-d&q=Enfold+text+instead+of+logo
https://www.google.com/search?q=Enfold+logo+plus+text

3: One suggestion i found was from @guenni007 and his idea was to use the “individual link” from the menu to do it but i couldnt figure out how to style / put the second slogan.

4: I dont care so much about the exact organisation of logo + text + subtext as long as it works / looks OK.
I need it for SEO reasons and maybe i need to put a Hx or “strong” into it

5: Do you know by chance if text in SVG is searchable for searchengines and if it is taken into account when it comes to ranking?

Here is a very raw scribble:
https://drive.google.com/file/d/1Eg4bSh_hwm3wX7N0aXtJjjIl6yCQiRVg/view?usp=sharing
The circle = just a graphic
“Topic” = should be the homelink. It contains our main keyword (this should maybe become a H1 or a span or a strong – depends on the decision we make with the Themesettings)
“Company” = just text, but seperately stylable from the rest – so it should have a own span
“Slogan” = just text, but seperately stylable from the rest – so it should have a own span

Sounds much but is at least the same then i already asked – just in words than in code.

And like i said:
I dont care how it looks as long as it looks proper and not like a bug/issue.

kind regards
Elvira

May 10, 2022 at 12:54 am #1351089

Mike
Moderator

Hi,
Thanks for the google search links but they both pointed to the same thread, thanks for the mockup it helps, but please note that the logo container is wrapped in the link so the image, Topic, Company, and Slogan will all be in the link.
As far as I know, text in SVG is not searchable, if this is only for SEO why not just add title & alt attributes to the logo image to achieve this?
Another option would be to not use the theme logo at all but use a header widget with a html widget so you can add the html layout just as you have in your mockup.

Best regards,
Mike

May 10, 2022 at 4:26 pm #1351193
InSilentio
Participant
Hi Mike,
1: when you scroll deeper you find also other threads (and maybe i used also other search strings but i cant remember and unfortunately i didnt save them)

2: “logo container is wrapped in the link so the image, Topic, Company, and Slogan will all be in the link.”
OK. But i definitely found at least two threads where clients were asking about “adding a text beside the logo” (maybe i need to search again)
And i cant imagine that there is no way to put a <div> with text beside it.

3: title & alt attributes dont count so much as headers or so.

4: Header widget
This was what i tried first.
I followed the advice i found in another thread which was from 2019 if i remember correct but it led to bad looking situation on smaller screens
(Should i give it another try?)

The last version i tried was this:
```
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
	$sub .= "<div id='text'></div>";
	$sub .= "<div id='claim'></div>";
	return $sub;
}
```
kind regards
Elvira
May 10, 2022 at 5:57 pm #1351215

Mike
Moderator

Hi,
Thanks for the feedback, you can have the text to the right, please see our documentation here, with your code above but you will need specific css to move the “text” & “claim” there for each screen size and it is depending on your header size before and after scroll and the header height for mobile. It would be much easier if we could help on a live site.
I would recommend using “span” instead of a “div” because you will want them to display “inline” instead of “block” for the text to be to the right of the image.
I will try a Header widget solution on my test site and see if that might work out.

Best regards,
Mike

May 12, 2022 at 2:56 pm #1351571
Mike
Moderator
Hi,
Thank you for your patience, I tested this function in my functions.php:
```
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= '<span class="bloginfo name">' .get_bloginfo( 'name', 'display' ).'</span>';
	$sub .= '<span class="bloginfo description">' .get_bloginfo( 'description', 'display' ).'</span>';
	return $sub;
}
```
it gets the site title and description from the WordPress settings, and I uploaded a small 80px red logo as the regular logo and small 80px white logo as the transparent logo in the theme options:

Then I added this css:
```
#top .logo,
#top .logo a {
  overflow: visible;
	display:flex;
	max-height: 80px;
	color:red;
	text-decoration: none;
}
@media only screen and (min-width: 990px) { 
#top #header.av_header_transparency .logo a {
	color:#fff;
}
}
.logo .subtext {
  font-size: 20px;
	padding-left: 20px;
    font-weight: 600;
	display: flex;
  flex-direction: column;
  align-items: flex-start;
	justify-content: center;
}
.bloginfo {
line-height:22px
}
@media only screen and (max-width: 820px) { 
.logo .subtext {
	font-size: 12px;
}
.bloginfo {
line-height:14px
}
}
@media only screen and (max-width: 610px) {
.responsive #top #wrap_all #header_main .main_menu {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
}
.responsive #top #header_main .logo {
    display: flex;
    width: 100%;
    justify-content: center;
}
#header_main .inner-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}
}
```
my header size is the default “Slim”, with a “Sticky Header”

Desktop before and after scroll:

Laptop:

For mobile (425px) I stacked the logo & text over the mobile menu and centered them, this seems to work better than making the text so small that I couldn’t really read it:

This is how the smallest mobile (375px) looks:

Please give this a try, I linked to my test site below.

Best regards,
Mike
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.