Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Header scaling

  • Hey I was wondering how to keep the header style synced with every device.

    For example I have the pc version here –>
    But the tablet versions header looks much different –>

    How 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.

    but upon viewing with the pc screen its totally off

    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 % or vw as 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 px as 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 –>

    But it looks a bit off on my laptop screen –>

    And even more on the wordpress tablet simulation –>

    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.

  • You are welcome   🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.