Hello Nicole,

Thank you for reaching out to us.

We have a design that works for most cases; however, in your situation, your logo is a bit large. You added it to the topbar, but on mobile, the topbar doesn’t display a logo. Instead, the logo was added to the header for mobile, which is why you were seeing these issues.

I have fixed it by applying some CSS adjustments.

/* Mobile and small devices */
@media (max-width: 991px) {
    #sp-header-topbar {
        display: none;
    }
}

/* Medium devices (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    div#sp-logo .logo,
    div#sp-logo .logo a {
        display: block;
        width: 360px;
    }

    .logo-image {
        height: 60px !important;
        width: 150px;
    }

    #sp-header.lg-header .sp-column {
        height: auto;
        margin-top: 10px;
    }

    #sp-header-topbar {
        display: none;
    }
}

/* Large devices (1200px and above) */
@media (min-width: 1200px) {
    div#sp-logo .logo,
    div#sp-logo .logo a {
        display: block;
        width: 360px;
    }

    .logo-image {
        height: 170px;
        width: 340px;
    }
}

Thanks,