Header different on Desk/Tab & mobile

  • Royah Marie

    (@hautecreations)


    1 year, 2 months ago

    Hello. I have been through the forum and I have NO idea why this is so hard. I have tried various combinations of what I have found and I can’t make this work. I even tried just uploading the header through the standard customization options and making a special one for mobile (so only doing the mobile part below with !important and STILL I couldn’t get it to work.

    Theoretically, to a layman, this “should” work but I’m obviously very wrong. I have two different images to use as a header. One for mobile view and one for desktops & tablets. Here is what I’m using:

    /* header image on mobile */
    @media screen and (max-width: 767px) {
    .site-header {
    background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/Web-Mobile-Header-600×154-px.png);}
    }
    @media screen and (max-width: 767px) {
    .site-header .site-branding img{ max-height: 175px !important; }
    .site-header .site-branding img{ max-width: 200px !important; }
    .site-header .custom-logo-link { display: flex; align-items: center; }
    .site-header .site-branding {
    background-repeat: no-repeat;
    margin:0 auto;}
    }
    @media screen and (max-width: 767px) { masthead {

background-size: cover;
    }
    /* header image on desktop & tablet */
    @media screen and (min-width: 768px) {
    .site-header {
    background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/WebsiteHeader.png)}
    }
    @media screen and (min-width: 768px) {
    .site-header .site-branding img{ max-height: 175px !important; }
    .site-header .site-branding img{ max-width: 200px !important; }
    .site-header .custom-logo-link { display: flex; align-items: center; }
    .site-header .site-branding {
    background-repeat: no-repeat;
    margin:0 auto;}
    }
    @media screen and (min-width: 768px) { masthead {

background-size: cover;
    }

    I’m so sorry, I really tried to do this without adding another question to your queue

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Royah Marie

    (@hautecreations)

    Sorry, it seems I cannot edit my initial post. Here is the updated CSS for your review. Please ignore the one above.

    /* header image on mobile */
    @media screen and (max-width: 1363px) {
    .site-header {
    background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/Web-Mobile-Header-600×154-px.png);
    }
    }
    @media screen and (max-width: 1363px) {
    .site-header .site-branding img{ max-height: 175px !important; }
    .site-header .site-branding img{ max-width: 200px !important; }
    .site-header .custom-logo-link { display: flex; align-items: center; }
    .site-header .site-branding {
    background-repeat: no-repeat;
    margin:0 auto;}
    }
    @media screen and (max-width: 1363px) { masthead {

background-size: cover;}
    }

/* header image on desktop */
    @media screen and (min-width: 1364px) {
    .site-header {
    background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/WebsiteHeader.png)}
    }
    @media screen and (min-width: 1364px) {
    .site-header .site-branding img{ max-height: 175px !important; }
    .site-header .site-branding img{ max-width: 200px !important; }
    .site-header .custom-logo-link { display: flex; align-items: center; }
    .site-header .site-branding {
    background-repeat: no-repeat;
    margin:0 auto;}
    }
    @media screen and (min-width: 1364px) { masthead {

background-size: cover;}
    }
    Saif

    (@babylon1999)

    Hello @hautecreations,

    The link is not working for some reason, could you please make the website public or see what’s wrong? Also, it would be great if you could remove any custom CSS.

    Moreover, could you provide more details about what you’re aiming for? In other words, what’s your desired end result?

    Look forward to hearing back from you. :?)

    Thread Starter Royah Marie

    (@hautecreations)

    Can you try now?
    https://staging1.delicatefabrics.net/

    I have what feels like a million CSS entries to get this site to look the way I want it to. I’m trying to have two different header images depending on the device: one for mobile and tablet view and another for anything larger than a tablet.

    Because mobile and tablet use the alternate navigation, I need to adjust my background.

    Hi @hautecreations

    After checking your website, I see you are using the Astra theme but posted in the Storefront theme support forum. To align with?forum best practices, please create a new topic in Astra theme support here.

    Since this is a third-party theme which we don’t provide support for (please see our Support Policy), it would be best to reach out to the theme’s developers for further assistance. I am sure they will have no problem supporting you there.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header different on Desk/Tab & mobile’ is closed to new replies.