Header Builder issue - not full width Header

Support
#1

Hi there,

I have a staging site set up at http://genedia.ethermedia.hu/
Here’s the thing. This is kind of how the site should look more or less:

In the builder, it looks fine! However, if I look at it on the frontend. It appears a bit messed up:

I traced back the issue to the header. Thing is, if I remove the custom header from the page, the build looks normal again. I can’t figure out though what is causing the issue. I’m guessing that it’s related to setting the headers container to 790px, but I can’t figure out how else to achieve this look if not for that. Also, it worked I think before making the header sticky.

Thanks!

#2

Hello @Pbalazs89,

Thanks for writing in! I have inspected your header and your issue is because of your custom CSS code. You have added this:

.covidbar {
    max-width: 40%;
    margin: 0 auto;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: fixed;
    left: 30%;
}

It is best that you set a fixed 800 pixel maximum width and then position the bar 50% to the left with a margin of -400 pixels so that it will always stay at the center. Therefore, the updated CSS code will be:

.covidbar {
    max-width: 800px;
    margin: 0 auto;
    margin-left: -400px !important;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: fixed;
    left: 50%;
}

Let us know if this would help you.

1 Like
#3

Hi, Unfortunately that did not fix it:

https://youtu.be/NmpZuQ85y_o

Any idea why?

#4

Hi @Pbalazs89,

The reason behind the issue is the broken CSS code inside the header. I went ahead and fix the issue and now the page is rendering properly.

COVID-HEADER-Headers-Pro
COVID-HEADER-Headers-Pro1842×404 60.3 KB

Thanks

#5

I’m crying inside! :smiley: Sorry to waste your time, and thanks for the help!

#6

Hi Paul,

Glad that it resolved now.

Thanks

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.