No prob. I’ve basically got it . . . now just trying to sort out how to get subtext to not push to the right in landscape orientation of cell phones. That’s not a huge deal though.

Thansk!
J

I have reactivared caching and autoptimize. I think I have it figured out

AH! I bet that’s it. I use Firefox out of habit and familiarity, but I’ll change to Chrome.

I will check chrome now and read the link you sent to help me learn it.

Thanks again! I’ll be at my ipad in a bit. My guess is it will work just fine on that.

Final question (I think): On my desktop/laptop, I just added the width line to move the subtext to the correct place (see below). Is there a more efficient way to do that where the distance from the edge of the logo is relative to the logo vs a defined pixel distance?
Here’s what I have for now:
/* Subtext to right of logo */
.logo .subtext {
position: absolute;
top: 50%;
right: 0;
width: 275px;
transform: translate(102%, -50%);
z-index: 999;

Hi Victoria ,

Autoptimize is deactivated and Caching is disabled. Logo and subtext are now visible.

J

PS My users cannot access the burger menu while I have those visible, at least on my iphone7. Bigger phones may not have the problem, but I want to be sure folks with older phones can access the menu easily.

Thanks again!
J

• This reply was modified 5 years, 11 months ago by gatehealing.

For now, until I can get just the logo hidden only on mobile, and subtext hidden only on tablet, I have hidden the entire logo area with this (I changed max-width to 1030px):
/* Hide logo in mobile*/
@media only screen and (max-width: 1030px) {
#main .av-logo-container {
display: block;
}
#header .logo,
#main .logo {
display: none!important;
}}

I will continue to play with the code to try and figure out how to:
1) Hide only the logo on mobile devices (because the burger menu prevents subtext from overlapping anything)
2) Hide only the subtext on tablets (because tablets don’t have the burger menu, so the written items do overlap the subtext)

Any help is much appreciated.

Now I have subtext on 2 lines on my iphone 7, but burger menu is so close to the clickable subtext that you have to click below the burger menu to access menu, or else you get the logo subtext url that just takes you back to home page.

There must be a workaround, like not showing logo on mobile, or putting subtext below logo on mobile?
J

Thanks Mike,

Regarding size of menu: When I added that code, my iPhone burger menu is tough to open because it is so close to the subtext (may be easier on a larger phone than an iphone7). When I scroll down through the menu items once the burger is open, the subtext remains and the menu items scroll through it.

Regarding the subtext being at the right of the logo, see the code that I added in order to get it on desktop/laptop below (next sentence addresses that we may need to pick this up in thread specific to this topic). I don’t know if the way I accomplished it is the most efficient or not, or if there is a way to better accomplish it that builds in more effective responsiveness for mobile and tablets so that tap targets aren’t so close together (since subtext is clickable to same url as logo, and burger is right under it, as is search icon).

I don’t know if this was the thing to do, but since this is a fairly specific new topic that is not directly related to the title of this thread, I started a new one: https://kriesi.at/support/topic/log-subtext-is-on-right-of-logo-but-words-stack-on-top-of-one-another/#post-1043479

I added this to that thread earlier, however, while this seems to work on laptop/desktop, I get the subtext pushed to the right:

I have basically figured it out on laptop/desktop by adding Width (also adjusted translate(xxx%, -50%) to the following code, but on mobile devices, it pushes it way over to the right. I will leave it as is for now so you can see it at https://gatehealing.com/ :

/* Subtext to right of logo */
.logo .subtext {
position: absolute;
top: 50%;
right: 0;
width: 275px;
transform: translate(102%, -50%);
z-index: 999;

Jon

As I mentioned, I have the code to put the subtext on the right.
I also found the code to change the size of the logo, but if I change the width to less than about 300px, I begin to get words stacked on top of each other, and I cannot seem to get the words up against the logo. I am guessing I’ll need this to be responsive for mobile devices, but I think there is other code for doing something different on mobile devices (right?) :
#top .logo ,
#top .logo a {
width: 300px;
}
@media only screen and (max-width: 767px) {
#top .logo ,
#top .logo a {
max-width: 60% !important;
width: 60% !important;
height: auto;
}}

Hi Mike,
My website is https://gatehealing.com/
Yes, I had discovered the code for subtext to the right of the logo, but it has been stacking words on top of one another vs extending them out to the right.
I’ll try the code you gave me just to get the menu down a little bit for now.

J

Well, I’d still like to be able to get the subtext on 2 lines to the right of the logo, but I’m struggling with how to extend the area to the right of the logo enough to fit the company name on one line, and my name on one line.

J

Alternatively, if I can reduce the space between the 2 lines of my subtext, that would work as well since the amount of change I need now is pretty small.

After a lot of experimenting, I discovered that in the infinite wisdom of the Yoast folks (love the plugin for the most part, but this seems really odd), they manage to pull the Twitter image info from the Facebook settings in their plugin.

You can close this thread.

Thx
J

Ok, I have this sort of working, but the new issue on mobile subtext in wrong place seems like it should be new thread. Will look for fix in documentation, but if it’s not there, I’ll start new thread unless y’all prefer for me to put it here.

J

I am seeing this Quick CSS from another ticket is conflicting:
@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive #wrap_all .logo a, .responsive #wrap_all .logo img {
max-width: 200px;
}
}
@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive #wrap_all .logo a, .responsive #wrap_all .logo img {
max-width: 200px;
}

Even when I remove this, the words “Gate Healing, PLLC” are stacked on top of one another and are using a very blocky font. I will keep reading to see if I can figure out how to use a little nicer looking font and stretch out the area for the words a bit. If it’s an easy thing you know off hand, great, but I don’t mind digging a little more.

Is there a way to keep the previous Quick CSS so I don’t lose those benefits?

Ok, the subtext code on the Documetation page reads like this, so it may need to be corrected (?):
Image logo with subtext
You can add subtext to your logo by adding following code to Functions.php file of your child theme in Appearance > Editor
The code below will wrap your subtext in a H1 tag, we will add custom CSS to style it.
add_filter(‘avf_logo_subtext’, ‘kriesi_logo_addition’);
function kriesi_logo_addition($sub) {
$sub .= ‘<h1>Company Name</h1>’;
return $sub;

On this page https://kriesi.at/documentation/enfold/logo/#toggle-id-1