Support » Theme: Storefront » How Do I Create Responsive Header for Handheld Media?

  • I am using Storefront’s own free child theme called Boutique. Even though it is already a child theme, I am still customizing it a little. Storefront’s header isn’t responsive from what I’m seeing and reading. Meaning it doesn’t resize, but my header is my logo, so I would like to have it show up correctly–a smaller version–on anything smaller than desktop. Someone somewhere must have tweaked the @media code for handheld to make a responsive header, but I cannot find the answer. Any help appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • https://docs.woocommerce.com/document/customizing-responsive-theme-best-practices/

    So, @sjbaily, you’re question is actually primarily a CSS question (and just-so-happens to be on a Storefront Child theme) 🙂 But lemme see if I can help….

    Depending on what/which customization you’ve done, you’ll want to do a few media queries and add your custom image dimensions to each of these:

    @media only screen and (max-width: 1000px)  { 
      /* Styles placed here will only apply to screens less than 1000 pixels wide */ 
    }  
    @media only screen and (max-width: 768px) { 
      /* Styles placed here will only apply to screens less than 768 pixels wide */ 
    }  @media only screen and (min-width: 768px) { 
      /* Styles placed here will only apply to screens more than 768 pixels wide */ 
    }

    Right up there where the */ comments are is where you’ll want to add your tweaks to your header’s logo.

    I hope that helps

    @burlesonbrad Hi Brad, Thanks for the effort. I do know about the @media, but can’t seem to make it work. Found some others with my issue and they used the following:

    /* Logo size for mobile site */
    @media screen and (max-width: 768px) {
    .site-header .site-branding img {
    max-height: none !important;
    max-width: none !important;
    width: 322px !important;
    }
    }
    
    /* Logo size for desktop site */
    @media screen and (min-width: 768px) {
    .site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    height: auto;
    max-height: none;
    max-width: none;
    width: 322px !important;
    }
    }

    I even added the .custom-logo-link img and tried a few variations because 322 was not necessarily the size I needed, but to no avail. I cannot see where but perhaps some tweak I have already done in the Boutique style.css to the header to make the desktop version look as I want it to is overriding or maybe . . . I don’t know. I am hoping someone can look at my Boutique style.css added below and help.

    Customized Storefront child Boutique style.css:

    
    /* Creates the back to top button */
    .topbutton {
    height:50px;
    width:50px;
    position:fixed;
    right:320px;
    bottom:60px;
    z-index:8;
    background-image: url("https://www.seasonedandsexy.com/wp-content/uploads/2017/05/top_button.png");
    background-repeat:no-repeat;
    display:none;
    }
    
    .page-template-template-homepage, .widget_product_search form input[type="search"], .widget_product_search {
    display:none !important;
    } 
    
    /* Logo size for mobile site */
    @media screen and (max-width: 768px) {
    .site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    	max-height: none !important;
            max-width: none !important;
            width: 322px !important;
    }
    }
    
    body {
      background: #303030;
      -webkit-font-smoothing: subpixel-antialiased; }
    
    body,
    button,
    input,
    select,
    textarea {
      font-family: 'Lato', sans-serif; }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Playfair Display', serif;
      font-weight: 400;
      letter-spacing: 0 !important; }
      h1 a,
      h1 label,
      h2 a,
      h2 label,
      h3 a,
      h3 label,
      h4 a,
      h4 label,
      h5 a,
      h5 label,
      h6 a,
      h6 label {
        font-weight: 400; }
    
    h1.woocommerce-products-header__title {
        color: #a80021; }
    
    .widget h1,
    .widget h2,
    .widget h3,
    .widget h4,
    .widget h5,
    .widget h6 {
      font-weight: 400; }
      
    .site-header {
      border-bottom: 0; }
    
    .site-header, .header-widget-region {
        box-sizing: content-box;
    }
    
    .site-header {
        max-width: 67.141em;
        margin-left: auto !important; 
            background-repeat:no-repeat !important;
            }
    
    .site-header {   
            margin-right: auto;
            padding-top: 0px;
            padding-right: 6em;
            padding-bottom: 0px;
            padding-left: 6em;
        box-sizing: content-box;
        clear: both;
    }
    
    .site-branding .site-title {
      font-family: 'Playfair Display', serif; }
    
    .site-branding .site-title a {
      font-weight: 400; }
    
    .storefront-product-section {
      margin-bottom: 4.236em; }
    
    .storefront-product-section,
    .hentry {
      border-bottom-style: double;
      border-bottom-width: 3px;
      border-bottom-color: rgba(0, 0, 0, 0.025); }
    
    .sku_wrapper {
    display:none !important;
    }
    
    .woocommerce-tabs ul.tabs li a,
    .woocommerce-product-rating,
    .woocommerce-breadcrumb {
      text-transform: uppercase; }
    
    .woocommerce-breadcrumb {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
      .woocommerce-breadcrumb a {
        text-transform: none; }
    
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message,
    .woocommerce-noreviews,
    p.no-comments {
      color: inherit;
      background: rgba(0, 0, 0, 0.025); }
      .woocommerce-error a,
      .woocommerce-error a:hover,
      .woocommerce-error .button,
      .woocommerce-error .button:hover,
      .woocommerce-info a,
      .woocommerce-info a:hover,
      .woocommerce-info .button,
      .woocommerce-info .button:hover,
      .woocommerce-message a,
      .woocommerce-message a:hover,
      .woocommerce-message .button,
      .woocommerce-message .button:hover,
      .woocommerce-noreviews a,
      .woocommerce-noreviews a:hover,
      .woocommerce-noreviews .button,
      .woocommerce-noreviews .button:hover,
      p.no-comments a,
      p.no-comments a:hover,
      p.no-comments .button,
      p.no-comments .button:hover {
        color: inherit;
        font-weight: normal; }
      .woocommerce-error a,
      .woocommerce-info a,
      .woocommerce-message a,
      .woocommerce-noreviews a,
      p.no-comments a {
        text-decoration: underline; }
    
    .woocommerce-error {
      border-left-color: #e2401c; }
    
    .woocommerce-info,
    .woocommerce-noreviews,
    p.no-comments {
      border-left-color: #3D9CD2; }
    
    .woocommerce-message {
      border-left-color: #a80021; }
    
    .home.blog .site-header,
    .home.page:not(.page-template-template-homepage) .site-header,
    .home.post-type-archive-product .site-header {
      margin-bottom: 0; }
    
    .home h1 { display:none }
    
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button,
    .added_to_cart,
    .widget-area .widget a.button,
    .site-header-cart .widget_shopping_cart a.button {
      box-shadow: inset 0 -0.327em 1.618em rgba(0, 0, 0, 0.1); }
    
    button.menu-toggle {
      margin-bottom: 0; }
    
    .boutique-primary-navigation {
      -webkit-font-smoothing: antialiased; }
      .boutique-primary-navigation::after {
        clear: both;
        content: "";
        display: table; }
    
    .main-navigation ul li a::before {
        display: inline-block;
        font-size: inherit;
        -webkit-font-smoothing: antialiased;
        content: none !important;
        margin-right: .5407911001em;
    }
    
    .main-navigation ul.menu > li > ul,
    .main-navigation ul.menu ul,
    .site-header-cart .widget_shopping_cart {
      background-color: #212121; }
      
    .main-navigation ul.menu, .main-navigation ul.nav-menu {
        text-align: right;
    }
    
    .main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover {
        color: #ffffff;
    }
    
    .main-navigation ul li a:hover, .site-title a:hover, ul.menu li a:hover, .site-branding h1 a:hover {
        color: #a80021;
    }
    
    .main-navigation ul.menu, .main-navigation ul.nav-menu {
        max-height: none;
        overflow: visible;
            overflow-x: visible;
            overflow-y: visible;
            }
            
    .handheld-navigation  { 
      content: "" !important;   
            }
    
    .woocommerce-pagination .page-numbers li .page-numbers.current, .widget a.button.checkout {
        background-color: #a80021;
        border-color: #a80021;
        color: #ffffff;
    }
    
    .storefront-primary-navigation {
      background-color: transparent; }
    
    .posted-on,
    .byline {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: .7em; }
    
    .hentry .entry-header {
      border-bottom-width: 0;
      margin: 0 0 3.631em; }
      
      
    .widget h3.widget-title,
    .widget h2.widgettitle {
      border-bottom-width: 1px;
      border-bottom-color: rgba(0, 0, 0, 0.1) !important;
      font-style: italic;
      font-weight: 400; }
    
    .hentry .entry-header h1 {
      border-bottom: 4px double rgba(0, 0, 0, 0.1);
      padding-bottom: .618em; }
    
    .col-full,
    .header-widget-region {
      box-sizing: content-box; }
    
    .header-widget-region {
      margin: 0; }
    .header-widget-region .col-full {
        background: #fff;
        padding: 0 1em; }
    .header-widget-region .widget {
        padding-top: 2.244em; }
        
        
    .woa-top-bar .block .widget {
        font-size: 18px;
        letter-spacing: 2px;
    }
    
    .site-content .col-full {
      background: #fff;
      padding: 1.618em;
      box-shadow: inset 0 0 0 .53em #f6f6f6; }
    
    .site-footer {
      padding: 0; }
      
    .site-footer {
        background-color: transparent;
        color: #777777;
    }
      
    .site-footer .col-full {
        background: #d3d3d3;
        padding: 1.618em; }
        
    .site-info {
        padding: .617924em 0;
    }
    
    .woocommerce-breadcrumb {
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      background-color: transparent !important; }
    
    .site-header-cart {
      margin-bottom: 0; }
    
    /*
    ul.products li.product {
      overflow: visible; }
      ul.products li.product .price {
        position: absolute;
        top: .618em;
        right: 1px;
        padding: .53em .857em;
        background: #555;
        color: #fff;
        font-weight: 700;
        box-shadow: 5px 0 0 0 #555; }
        ul.products li.product .price:after {
          content: "";
          display: block;
          position: absolute;
          right: -5px;
          top: 100%;
          border: 5px solid transparent;
          border-top-color: #222222;
          border-left-width: 0; }
        ul.products li.product .price del {
          font-weight: 400;
          opacity: 0.5; }
      ul.products li.product .onsale {
        display: none; }
      ul.products li.product img {
        border: 1px solid rgba(0, 0, 0, 0.1); }
    */ 
    
    .single-product .images img {
      border: 1px solid rgba(0, 0, 0, 0.1); }
    
    table.cart td.actions {
      border: 0;
      padding-top: 1.618em; }
    
    .widget_product_categories ul li:before,
    .widget_categories ul li:before {
      content: "\f07b" !important; }
    
    .widget_product_categories ul li.current-cat:before,
    .widget_categories ul li.current-cat:before {
      content: "\f07c" !important; }
    
    .widget_recent_comments ul li:before {
      content: "\f075" !important; }
    
    .widget_archive ul li:before {
      content: "\f07c" !important; }
    
    .widget_recent_entries ul li:before, .widget_pages ul li:before {
      content: "\f15c" !important; }
    
    .page-template-template-homepage .site-main {
      padding-top: 0; }
      .page-template-template-homepage .site-main > .type-page:first-child {
        width: auto !important;
        margin-left: 0 !important; }
        .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header {
          margin-left: auto;
          margin-right: auto; }
          .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header h1 {
            font-size: 2.618em; }
        .page-template-template-homepage .site-main > .type-page:first-child .col-full {
          padding: 0;
          background: none;
          box-shadow: none; }
    
    .content-area,
    .widget-area {
      margin-bottom: 0; }
    
    .woocommerce-checkout.scc-distraction-free-checkout .boutique-primary-navigation {
      display: none; }
    
    .woocommerce-checkout.scc-distraction-free-checkout .site-header {
      margin-bottom: 0; }
    
    .sph-hero .col-full {
      background: transparent;
      box-shadow: none; }
    
    @media screen and (min-width: 768px) {
      .col-full {
            padding: 0 5.874em; }
      .boutique-primary-navigation {
        border-top-left-radius: 0.327em;
        border-top-right-radius: 0.327em;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -0.53em rgba(0, 0, 0, 0.05);
        background: #212121;
        clear: both; }
        
      .storefront-primary-navigation {
        clear: both;
        background: rgba(0,0,0,.06);
            background-color: rgba(0, 0, 0, 0.06);
            background-image: none;
            background-repeat: repeat;
            background-attachment: scroll;
            background-clip: border-box;
            background-origin: padding-box;
            background-position-x: 0%;
            background-position-y: 0%;
            background-size: auto auto;
        margin-left: -99em;
        margin-right: -99em;
        padding-left: 107em;
        padding-right: 107em;
    } 
    
      .site-branding,
      .site-search,
      .site-header-cart,
      .site-logo-anchor,
      .custom-logo-link {
        margin-bottom: 4.236em; }
      .site-header {
        padding-top: 19em; }
      .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,
      .site-header-cart .cart-contents {
        padding-bottom: 0.2em !important;
        padding-top: 0.418em; }
      .site-content .col-full,
      .site-footer .col-full,
      .header-widget-region .col-full {
        padding: 0em 6.2em; }
      .header-widget-region .col-full {
        padding-top: 0;
        padding-bottom: 0; }
      .site-footer .col-full {
        padding: 2.618em 6.2em;
    }
      .main-navigation ul.menu li.current-menu-item > a {
        position: relative; }
      .main-navigation ul.menu li.current-menu-item > a:before {
          content: none !important;
          display: block;
          position: absolute;
          top: 100%;
          left: 50%;
          border: .618em solid transparent;
          border-top-color: #212121;
          margin-left: -.618em; }
      .main-navigation ul.menu ul,
      .main-navigation ul.nav-menu ul {
        background: #212121; }
      .main-navigation .smm-mega-menu {
        margin-left: 0;
        margin-right: 0;
        padding: 4.236em 5.874em;
        background-color: #212121 !important; }
      .main-navigation .smm-mega-menu ul {
          background-color: transparent !important; }
      .sd-sticky-navigation .main-navigation .smm-mega-menu {
        margin-left: -5.874em;
        margin-right: -5.874em; }
      .page-template-template-homepage-php .content-area {
        width: 73.9130434783%;
        float: left;
        margin-right: 4.347826087%; }
        .page-template-template-homepage-php .content-area .columns-3 ul.products li.product {
          width: 29.4117647059%;
          float: left;
          margin-right: 5.8823529412%; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section {
        margin-left: -5.874em;
        margin-right: -5.874em;
        padding: 0 5.874em;
        background: rgba(0, 0, 0, 0.025);
        padding-top: 3.632em;
        padding-bottom: 1em;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 0 0.53em rgba(0, 0, 0, 0.025); }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product span,
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .button,
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .star-rating {
          display: none; }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3,
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
          display: block;
          position: absolute; }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3 {
          top: 0;
          left: 0;
          z-index: 99;
          -webkit-transition: all ease .2s;
          transition: all ease .2s;
          color: #f6f6f6;
          opacity: 0;
          width: 100%;
          text-align: left;
          padding: 1.618em;
          color: #303030;
          opacity: 0; }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
          bottom: 0;
          right: 0;
          top: auto;
          z-index: 99; }
          .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price span {
            display: block; }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product img {
          margin: 0; }
        .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a {
          display: block; }
          .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #fff;
            opacity: 0;
            -webkit-transition: all ease .2s;
            transition: all ease .2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
          .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:before {
            content: "";
            display: block;
            position: absolute;
            top: .618em;
            left: .618em;
            right: .618em;
            bottom: .618em;
            border: 4px double rgba(0, 0, 0, 0.1);
            z-index: 9;
            opacity: 0;
            -webkit-transition: all ease .2s;
            transition: all ease .2s; }
          .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover h3, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:after, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:before {
            opacity: 1; 
    }
      .page-template-template-homepage-php .boutique-featured-products .hentry {
        padding-bottom: 0;
        border-bottom: 0; }
      .page-template-template-homepage-php .boutique-featured-products .entry-header h1 {
        text-align: center; }
      .page-template-template-homepage .content-area .sph-hero,
      .page-template-template-homepage .content-area .sprh-hero {
        margin-top: 0 !important; }
        .page-template-template-homepage .content-area .sph-hero.full,
        .page-template-template-homepage .content-area .sprh-hero.full {
          margin-left: 0 !important;
          margin-right: 0 !important; }
      .page-template-template-homepage .boutique-featured-products .sph-hero.full,
      .page-template-template-homepage .boutique-featured-products .sprh-hero.full {
        margin-left: -5.874em;
        margin-right: -5.874em; }
      .page-template-template-homepage.left-sidebar .content-area {
        width: 73.9130434783%;
        float: right;
        margin-right: 0; }
      .page-template-template-homepage.left-sidebar .widget-area {
        width: 21.7391304348%;
        float: left;
        margin-right: 4.347826087%; }
      .sph-hero .col-full,
      .sprh-hero .col-full {
        background-color: transparent;
        padding: 0; }
      .sph-hero h1,
      .sprh-hero h1 {
        font-weight: 400; }
      .site-main .sph-hero .overlay,
      .site-main .sprh-hero .overlay {
        padding: 4.236em; } }
    
    @media screen and (max-width: 768px) {
      .col-full {
        padding: 0 1em;
        margin: 0 1em;
         }
     
      .boutique-featured-products .sph-hero.full,
      .boutique-featured-products .sprh-hero.full {
        margin-left: -1em;
        margin-right: -1em; }
      .boutique-featured-products .storefront-product-section,
      .boutique-primary-navigation {
        margin-left: -1em;
        margin-right: -1em;
        }
      .boutique-primary-navigation {
        padding-top: 0;
         }
      .boutique-primary-navigation button.menu-toggle {
          margin-top: 0; }
      .site-content .col-full,
      .site-footer .col-full {
        padding-left: 1em;
        padding-right: 1em; } }
        
        /*margin at bottom of footer widget area */
    
    #footer-widgets {
    
    margin-bottom: 0px ! important;
    
    }
    

    I have tweaked alot of padding and margins, mostly to make the site-header the same width as the page column. Sorry site is not live or I would show you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How Do I Create Responsive Header for Handheld Media?’ is closed to new replies.