Hello

One option would be to add the following to the Custom CSS field of your template settings which will essentially move the position down 110px.

.header-2 {

    position: relative;

    top: 110px;

    z-index: 100;

}

If this solution is not suitable, come back to me and I will find an alternative.

Ciaran

Ciaran,

Thank you for the suggestion! The code successfully moved the header-2 contents down the page and, after adjusting the top value from 110px to 60px, I was able to align it with the logo and menu. However, when viewed in portrait mode on a mobile device, the contents of the header-2 module now unacceptably overlap the logo and menu. In addition, an empty area now exists above the logo and menu (where the header-2 contents originally were). The header-1 position is currently empty. I could increase the header-2 top value to move the contents further down so it no longer overlaps, but it would not be exactly where I wanted it (and would still leave the empty space issue). Is there an alternative that would better address these issues or solve the new ones?

The pages are still under development. I will email you the URL of a hidden page where you can better view this issue. Thanks!

Steven

Since my prior response, I repositioned header-1 to the right margin (.header-1 { position: absolute; right: 0;} ) and placed some of the content from header-2 into header-1. This solved my desire to eliminate the empty space above the logo and menu. I still have the problem that header-2 is displayed in front of the logo and menu on mobile devices.

Steven

Hi Steven

Would you have a URL to an example of this issue?

Ciaran

Thanks for looking into this. I've sent you the URL by email.

Steven

Hi Steven

We do not appear to have received your email. Could I ask you to resend to info@joomla51.com. Please include a URL to this post for our reference.

Ciaran

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 440px) {

    .header-2 {

        margin-left: auto;

        font-size: 8px;

    }

}

Ciaran

Perfect! Thank you for your exemplary support!

Steven