Sure, it’s there now.

J

I think this may be taking too much of y’all’s time for a relatively minor issue since having the subtext pushed over to almost center in landscape orientation on mobile phones isn’t really a big deal as it does not block access to the burger menu. I have reverted code back to what we had before most recent reply.

I really do appreciate all of the effort! Thank you a bunch.
Jon

I changed to (2%,-50%), and added the code you mentioned. Cleared caches in wordpress and iphone browser history/caches, but the subtext is still pushed to the right . . . that’s still really not a huge deal though. Here’s what i have in total for this — could the chunck of code in the Subtext Styling block be redundant? I do see that I have 102% there, but I think that section is for laptop/desktop (changing the 102% there to 2% causes the subtext to go all the way to the left and overlap the logo):

/*————————–*/
/* CSS – Subtext on right*/
/*————————-*/
#top .logo,
#top .logo a {
overflow: visible;
}
/*—————-*/
/* Subtext styling */
/*—————-*/
.logo .subtext h1 {
font-size: 20px;
font-weight: 550;
}

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

/*——————–*/
/* Hide logo in mobile*/
/*——————–*/
@media only screen and (max-width: 767px) {
.responsive #top .logo img {
display: none !important;
}
.responsive #top .logo .subtext {
transform: translate(2%, -50%) !important;
width: 235px !important;
}
.logo .subtext h1 {
font-size: 17px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.responsive #top .logo .subtext {
display: none !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

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 6 years, 3 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