-
Hey I was wondering how to keep the header style synced with every device.
For example I have the pc version here –> https://i.postimg.cc/zBNQHg2H/image.png
But the tablet versions header looks much different –> https://i.postimg.cc/DyD7D7wp/image.pngHow do I solve this?
-
Hi there,
You have this CSS:
site-logo { position: static !important; }Can you try removing it?
-
Ok, I removed it. I had originally placed it so that the position is same in every device, but that didnt work either. The problem now is how do I make the header look the same in every device.
I have used this css code below, to modify the placement
/* Set header logo position */ .site-logo { position: fixed; left: 95px; /* Adjust the left position as needed */ z-index: 1000; /* Ensure it's above other content */ }I adjusted it so that it looks like this if it were viewed on an ipad. We can see from the picture the logo is centered. https://i.postimg.cc/vm9rjNPn/image.png
but upon viewing with the pc screen its totally off https://i.postimg.cc/02FJsCK0/image.png
How do I fix this
-
The problem now is how do I make the header look the same in every device.
You can not do so with absolute values like 95px, trying using
%orvwas unit. -
I used the vw unit as you said, but it still doesnt sync well across devices. Is there anything else I can do?
-
It seems you are setting the header left padding to 169px to set the logo position, it’s still using
pxas unit:.inside-header { padding: 15px 0px 15px 169px; }Maybe try this CSS? The 1st 2% is right padding, and the 2nd 2% is left padding. Adjust the value according to your needs.
.site-header .inside-header { padding: 10px 2% 10px 2%; } -
I pasted the code and tweaked so that it looks good on the pc screen –> https://i.postimg.cc/9F15R6ZZ/image.png
But it looks a bit off on my laptop screen –> https://i.postimg.cc/sxnVZDRM/image.png
And even more on the wordpress tablet simulation –> https://i.postimg.cc/GhpbbF5c/image.png
Is there really no other way to sync the header on all devices?
-
Ah, do you mean you want the logo to be in the center of the white section of the background image?
If so, it’s not possible, as the logo size is fixed, but the background image size changes when screen size changes.
If you are ok with logo size changing, then it’s possible.
Let me know 🙂
-
Yes I meant that sorry if it wasnt clear at first. How do I change the logo size to make it be in the middle on every screen?
-
Try this CSS:
.site-logo { width: 16%; } .site-header .header-image { width: 100%; } .site-header { background-size: 100% 100%; } -
Thank you!
How would I add the header visible to mobile, so that it disappears when scrolled down.
-
You are using mobile header, if you disable the mobile header, the default header would show on mobile.
-
Thank you
-
You are welcome 🙂
- You must be logged in to reply to this topic.