Trouble With Header and Content Alignment

  • Resolved Tryb

    (@tryb)


    1 year, 8 months ago

    Hi all,

    I am designing my website with oceanwp, however, there’s an issue that I’ve not been able to resolve. Simply, the transparent header is not over the proper area and it needs to get in the right place, but it has a few nuances. For example, my header does not show up in elementor, but I can’t change it because it breaks a few things.

    I’ve come close to fixing the header in a few different ways, but whenever I fix something it messes another up. (please see images below)

    1: I set the margin-top of the first page on elementor to -100. This works perfectly until I remove the social menu. It messes up the alignment of the content below. (When I try to align the header menu to the right, the content below where it says grass-fed, etc. is shifted. Idk what conclusion to come to from this, but hopefully one of you guys does.

    2 After removing the social menu, if I set “overflow: hidden;” to page 1, it fixes the alignment, but seems to push the header out of view again. I tried adding a negative margin to the header but it had no effect.

    3 using any alignment feature hasn’t worked so far: it has no effect for some reason.

    4 Using inspect element, it looks like the content runs into the header which is why it’s being affected. I tried setting a margin of 100 for the content below to hopefully give it some space from the header, but it had no effect on the alignment other than just moving it down.

    That’s about it, sorry if it was too much information but I wanted to let you know what I’ve tried previously to hopefully spark ideas for possible solutions. Feel free to inspect the issue on my website trybjerky.com. If you have any ideas please let me know. I would appreciate any help. Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Tryb

    (@tryb)

    https://imgur.com/a/RAfQ2db here is a link to the screenshots

    @tryb,

    Hi, just to make sure, did you create that transparent header in Elementor or are you using the transparent header option of the OceanWP theme?

    I personally prefer to use the build in option of the theme in appearance > customize > header > general > transparent

    Thread Starter Tryb

    (@tryb)

    It is the transparent header option of the OceanWP theme.

    As mentioned, the header doesn’t even show up in Elementor. Which I think might be the stem of the problem. However, the header needs to remain this way to preserve the functionality of the header I already have. So if possible, let’s try to find a solution that works around this aspect.

    Hi and thanks for elaborating.

    This is what I see when I visit your website:
    https://app.screencast.com/4guS8nzodNhc7?conversation=hqOPX7QLV8oZBt6ysdWHbq

    What do you mean when you say that the header is not even showing up in Elementor? Do you mean, that while in edit mode of Elementor, you do not see the transparent header in there?

    That is normal, in edit mode I do not see the transparent header either.
    But there is a header when I visit your site.

    And that is the transparent header set in OceanWP theme?
    Please check the settings in appearance > customize > header > general > transparent again. Did you scroll down to “transparent settings” and made sure that background color is completely set to transparent? The slider for color needs to be set to “0”.

    Also make sure your hero image is set to “cover” on my large screen, it is white on the right side of the screen.

    Thread Starter Tryb

    (@tryb)

    Yes, the transparent header is set with OceanWP theme and it was at 0.3 opacity but I’ve changed it to 0 just to be sure.

    Yes, as you described, the header is not in elementor. I also do not have Oceanwp pro in case that matters.

    I’ve made some progress today. I actually thought I fixed it, but after further inspection, the menu dropdowns are no longer visible.

    here is the CSS that I put in.

    site-header {
    overflow: hidden;
    position: sticky;
    z-index: 999;
    }

    .elementor.elementor-17 {
    margin-top: -100px;
    }

    The ‘overflow: hidden’ property fixes the alignment again, but as mentioned, the dropdowns are now hidden as well. Both the ‘discover ^’ and the mobile menu dropdown are hidden.

    Without the .elementor.elementor-17 code setting the margin-top to -100px, the top of the page is just white space. IDK why this is the case. Maybe there’s another fix to it. https://snipboard.io/NaP9bc.jpg compared to https://snipboard.io/Rj1CBL.jpg .

    I’ve tried setting the site navigation and menu dropdowns etc to be visible with this code but it has no effect even after putting ‘!important’.
    .site-navigation {
    overflow: visible ‘!important;
    }

    The white space next to the image should be fixed now.
    Do you have any ideas to make the dropdowns show up or other ways to fix the alignment?

    Hi,

    This is what I see now on your website:
    https://app.screencast.com/WXOMjA3oSB5X0

    The dropdown menu is visible, the header is transparent.
    The only thing that is not yet right is the hero image on the homepage.

    Make sure it is set to “cover” and that the image you are using is large enough for larger screens. (1920px wide) You probably do not see that white space, because your screen is smaller?

    PS. although it seems fixed, I never have to use all that extra CSS to make it look right. Normally it looks good, by only using the default theme settings for the header.

    Take a look at my test site here with transparent header, no extra code needed:https://maatwerk-interieurs.nl/test/

    These are my OceanWP settings, no extra code needed what so ever:
    https://app.screencast.com/3VARRkAC2pcIP?conversation=QwLkyfxCe6lY3GkpXvMhCs

    • This reply was modified 1 year, 8 months ago by LogoLogics.
    Thread Starter Tryb

    (@tryb)

    I meant to put a post on here, but I didn’t want to celebrate too early. I seem to have fixed it now after spending wayyyyy too much time on it. It’s less of a fix and more of a supersized band-aid but it works for me ig.

    It must be something wrong with my specific header that came with the demo site. If anyone has this same issue, here’s the “fix”:

    Paste this cs
    #site-header {
    margin-top: 100px;
    }

    (you may need this CSS as for me the header overlaps with my content at the top)
    #transparent-header-wrap {
    margin-bottom: 100px;
    }

    I also had to put: margin-top: -100px; for .elementor.elementor-17 (to remove white-space at the top of my homepage)

    That should do the trick if you just want a header at the top. But if you want a sticky header then download Sticky Header OceanWP plugin. (all other plugins will not work from my experience) This is actually the easier way to do it as you don’t need the first CSS.

    Remove the first CSS, somehow works perfectly. Don’t ask me why. I could try to make it a shrinking header, but it’s so sha-nangled that I think it’s smarter to just not touch it.

    Case closed I’m out.

    Ah, there is a demo in the mix!
    You might be right, a demo can be great, but when you start changing things, there may be some hidden code from the demo, that can cause strange behavior.

    But hey, you got it working, so kudos to you!
    Annie

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Trouble With Header and Content Alignment’ is closed to new replies.