Phone number and email in header misaligned

Hi,

can you take a look at this site and let me know how to adjust the header to make everything work properly? The logo needs to move down and over and the contact info is behind it as well. i have tried some code that you have provided before but it isn’t working so i have deleted that out of custom css

Thanks!

www.jameshalliday.ca

id also like to adjust the positioning of the contact info, as well as the logo, and then have the contact info follow the menu down when you scroll…

thanks

Hi,

If I got your query correctly, you’ll add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-contact .header-contact-info {
        text-align: left; 
      }  
      .site-header {
        margin-top: 30px !important;
      }
      .site-header.float-header {
        margin-top: 55px !important;
      }
      .site-header.fixed {
        background-color: rgba(19,1,123,0.9);
      }
      body.siteScrolled .header-contact {
        position: fixed;
        z-index: 999;
      }
    }

Regards,
Kharis
aThemes Support

yes that worked well for the main page but the other pages are now misaligned…can you help me with that?

Also when you scroll down the contact portion of the top menu doesnt stretch far enough across.

and the contact info moves over when you scroll down as well.

Thanks for your help with all of this, you guys rock!

Hi,

Thank you for getting back.

To fix another problem with the width of the contact bar, try adding this CSS code:

    .header-contact {
      width: 100%;
    }

Regards,
Kharis
aThemes Support

Great thanks, now if you look at the about us page, the header is huge, not sure why that is.

Hi,

Try adding this CSS code:

    @media only screen and (min-width: 1025px) {
      .page-id-37 .site-header {
        top: 0 !important;
      }

      .page-id-37 .header-clone {
        height: 1px !important;
      }  
    }

Regards,
Kharis
aThemes Support

Thanks for the response, that didn’t seem to work for the other pages.

Hi,

Try adding this CSS code:

    @media only screen and (min-width: 1025px) {
      .page-id-37 .page-wrap {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        margin-top: 65px;
      }
      .page-id-37 .site-header:not(.fixed):not(.float-header) {
        background-color: transparent;
      }
    }

And keep the previous code remains there. Let me know how it goes.

Regards,
Kharis
aThemes Support

Hi, it didn’t work for all the pages.

Thanks