Move top menu down

I put this in the other thread, but I have not seen a response in several days, so I don’t know if it will be seen–if it was marked as read, I know it won’t be seen:

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;
}}

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

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.

Thanks Mike,
I only wanted to hide the Logo on mobile though. The burger menu on phones seems to leave plenty of room for my subtext on cell phones.

I don’t have my ipad with me, so you may have given me code to hide subtext only on tablets and hide logo only on mobile.

Thanks for the help.
J

Works great on my iphone7. I’ll check on my ipad2 tomorrow. Looking at tablet view in Appearance > Customize, it looks like subtext is pushed over to the right, and the white space to the left is clickable as logo area. I’m confused with that since if I’m reading the code correctly, it looks it says that between 768px and 1023px, that the subtext should be hidden, but the logo shown (which is what I want), but on that viewer, there’s no logo and subtext is present.

I’m trying to learn this stuff as I go along.
J

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;

Looks good! Subtext pushes to right in landscape position, which leaves a large white space to the left, but I am not overly concerned about that. I’ll see if I can play a bit with it to get landscape orientation to bring subtext back over to the right.

Thanks for everything!
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 */
}

This is now what I have. I have bolded the chunk not mentioned in your last reply–seems like it is still necessary, so I did not remove it (when I tried removing bolded chunk, it did not change the landscape situation on iphone 7). This now has the subtext pushed all the way over to the right, covering the burger menu:
/*——————–*/
/* Hide logo in mobile*/
/*——————–*/
@media only screen and (max-width: 767px) {
.responsive #top .logo img {
display: none !important;
}
.logo .subtext h1 {
font-size: 17px !important;
}
}
@media only screen and (max-width: 767px) and (orientation:portrait) {
.responsive #top .logo .subtext {
transform: translate(2%, -50%) !important;
width: 235px !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 */
}