Section Above Header

  • My site is not live so let me know if you cannot access it.

    I’m trying to add a section just above the header just like the red section you see on this Joomla site we designed: https://airportheatingandcooling.com. I was able to create the section in Elementor, but the padding and/or margin for the actual header in the theme’s customizing section doesn’t seem to want to cooperate. Does the Sydney theme have its own way of creating this top section? Is there a way to modify the theme’s padding or margin in Elementor?

    Thanks in advance!
    Tim

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mothy5000

    (@mothy5000)

    I added this CSS to the site which allowed me to push the header down to reveal the top section I created in Elementor. It appears to work for now. Is this the correct method to achieve this?

    .transparent-header .main-header:not(.sticky-active):not(.is-sticky), .transparent-header .bottom-header-row:not(.sticky-active):not(.is-sticky) {
    background-color: transparent;
    margin-top: 55px;
    }

    Thanks!

    I checked your site. You have empty space on top of header on smaller screen. Seems likely you’ll need to add media query to fix it.

    Try this code, that includes a few improvements to yours.

    @media only screen and (min-width: 1025px) {
  .transparent-header .main-header:not(.sticky-active):not(.is-sticky), .transparent-header .bottom-header-row:not(.sticky-active):not(.is-sticky) {
    background-color: transparent;
    margin-top: 75px;
  }  
}

@media only screen and (min-width: 1029px) {
  .transparent-header .main-header:not(.sticky-active):not(.is-sticky), .transparent-header .bottom-header-row:not(.sticky-active):not(.is-sticky) {
    margin-top: 55px;
  }  
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Section Above Header’ is closed to new replies.