Support » Theme: Storefront » Header Storefront

  • Hi @jarretc
    Hi dears!

    I am facing an issue with my header. It takes too much space (especially on Tablet- mobile) and it also has the menu almost “floating”. What can I do to make it proper?

    Thanks a lot!

    Araceli

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey there!

    You should be able to make some changes with CSS, can you give some more specific details on what you’d like changed and I’ll see if I can provide CSS for it?

    Thread Starter gallegoara

    (@gallegoara)

    Hi @fevered!

    The header doesn’t seem to adapt well for tablets. See attached pic… It creates a
    second line … and doesn’t transform the main menu in hamburger. https://www.dropbox.com/s/7kk6p11i8qdbg15/20200402_234714.jpg?dl=0

    I find also that the header for mobile and computer is too tall. I would want the logo and the menus closer together so that it doesn’t take that much space on the screen.

    How can I do that?

    Thanks a lot for your help!

    Araceli

    Thread Starter gallegoara

    (@gallegoara)

    Oh My! I just realized my Search and Sort by is not working either! As the search is in the header, in case that, when you are looking you find something weird over there can you tell me too?

    Hey there!

    For the second issue you’ve raised, can you create a new thread for that? It is better to have a thread for each issue so if folks later have the same problem they can find it easier – and that way you get more eyes on your issue!

    Thanks for the description of the original issue as well… Could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status.
    Select “Get system report” and then “Copy for support”.  Once you’ve done that, paste it here in your response.

    Thread Starter gallegoara

    (@gallegoara)

    Hi!

    This is the report.

    
    ### WordPress Environment ###
    
    WordPress address (URL): https://www.goshopia.com
    Site address (URL): https://www.goshopia.com
    WC Version: 4.0.1
    REST API Version: ✔ 1.0.7
    WC Blocks Version: ✔ 2.5.15
    Action Scheduler Version: ✔ 3.1.4
    WC Admin Version: ✔ 1.0.3
    Log Directory Writable: ✔
    WP Version: ❌ 5.3.2 - There is a newer version of WordPress available (5.4)
    WP Multisite: –
    WP Memory Limit: 768 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_GB
    External object cache: ✔
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 7.1.33 - We recommend using PHP version 7.2 or above for greater performance and security. How to update your PHP version
    PHP Post Max Size: 128 MB
    PHP Time Limit: 600
    PHP Max Input Vars: 3000
    cURL Version: 7.66.0
    OpenSSL/1.1.1d-fips
    
    SUHOSIN Installed: –
    MySQL Version: 5.7.25-28-log
    Max Upload Size: 128 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 4.0.1
    WC Database Prefix: wp_
    Total Database Size: 57.52MB
    Database Data Size: 48.37MB
    Database Index Size: 9.15MB
    wp_woocommerce_sessions: Data: 5.99MB + Index: 0.19MB + Engine MyISAM
    wp_woocommerce_api_keys: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_order_itemmeta: Data: 0.03MB + Index: 0.02MB + Engine MyISAM
    wp_woocommerce_tax_rates: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_woocommerce_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_actionscheduler_actions: Data: 0.60MB + Index: 0.16MB + Engine MyISAM
    wp_actionscheduler_claims: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_actionscheduler_groups: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_actionscheduler_logs: Data: 0.32MB + Index: 0.22MB + Engine MyISAM
    wp_adtribes_my_conversions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_affiliatemeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_affiliates: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_campaigns: Data: 0.00MB + Index: 0.00MB + Engine
    wp_affiliate_wp_creatives: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_customermeta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_affiliate_wp_customers: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_affiliate_wp_payouts: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_referralmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_referrals: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_rest_consumers: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_affiliate_wp_visits: Data: 0.01MB + Index: 0.00MB + Engine MyISAM
    wp_commentmeta: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
    wp_comments: Data: 0.02MB + Index: 0.02MB + Engine MyISAM
    wp_ewwwio_images: Data: 2.04MB + Index: 0.86MB + Engine MyISAM
    wp_ewwwio_queue: Data: 0.04MB + Index: 0.02MB + Engine MyISAM
    wp_failed_jobs: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_layerslider: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_links: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_mailchimp_carts: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_mailchimp_jobs: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_options: Data: 10.85MB + Index: 2.63MB + Engine MyISAM
    wp_postmeta: Data: 15.47MB + Index: 2.21MB + Engine MyISAM
    wp_posts: Data: 10.84MB + Index: 0.44MB + Engine MyISAM
    wp_queue: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_css: Data: 0.09MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_layer_animations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_navigations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_sliders: Data: 0.02MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_slides: Data: 0.05MB + Index: 0.00MB + Engine MyISAM
    wp_revslider_static_slides: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_form: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_form_meta: Data: 0.01MB + Index: 0.00MB + Engine MyISAM
    wp_rg_form_view: Data: 0.05MB + Index: 0.03MB + Engine MyISAM
    wp_rg_incomplete_submissions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_lead: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_lead_detail: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
    wp_rg_lead_detail_long: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_lead_meta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_rg_lead_notes: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_smush_dir_images: Data: 0.38MB + Index: 0.17MB + Engine MyISAM
    wp_telr_repeat_billing: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_telr_repeat_billing_transactions: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_termmeta: Data: 0.08MB + Index: 0.03MB + Engine MyISAM
    wp_terms: Data: 0.31MB + Index: 0.64MB + Engine MyISAM
    wp_term_relationships: Data: 0.26MB + Index: 0.56MB + Engine MyISAM
    wp_term_taxonomy: Data: 0.30MB + Index: 0.47MB + Engine MyISAM
    wp_tinvwl_analytics: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_tinvwl_items: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_tinvwl_lists: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_usermeta: Data: 0.11MB + Index: 0.08MB + Engine MyISAM
    wp_users: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
    wp_w3tc_cdn_pathmap: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_w3tc_cdn_queue: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_wcpv_commissions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wcpv_per_product_shipping_rules: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_admin_notes: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_admin_note_actions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_category_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_customer_lookup: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_wc_download_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_order_coupon_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_order_product_lookup: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_wc_order_stats: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_wc_order_tax_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_wc_product_meta_lookup: Data: 0.10MB + Index: 0.10MB + Engine MyISAM
    wp_wc_tax_rate_classes: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wp_wc_webhooks: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wp_yoast_seo_links: Data: 0.20MB + Index: 0.05MB + Engine MyISAM
    wp_yoast_seo_meta: Data: 0.09MB + Index: 0.10MB + Engine MyISAM
    
    ### Post Type Counts ###
    
    attachment: 1918
    custom_css: 1
    customize_changeset: 11
    elementor_library: 16
    elementor-hf: 1
    nav_menu_item: 37
    oembed_cache: 51
    page: 38
    post: 49
    product: 335
    product_variation: 886
    revision: 1056
    schema: 2
    shop_coupon: 
    shop_order: 
    shop_order_refund: 
    wphb_minify_group: 26
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (48) ###
    
    Gravity Forms: by rocketgenius – 1.9.17.14
    AffiliateWP: by Sandhills Development
    LLC – 2.4.5
    
    AffiliateWP - Affiliate Area Shortcodes: by AffiliateWP
    LLC – 1.1.7
    
    AffiliateWP - Show Affiliate Coupons: by AffiliateWP – 1.0.7
    AffiliateWP - Store Credit: by Sandhills Development
    LLC – 2.3.3
    
    AffiliateWP - WooCommerce Redirect Affiliates: by AffiliateWP – 1.0 – Not tested with the active version of WooCommerce
    AfterShip - WooCommerce Tracking: by AfterShip – 1.9.17 – Not tested with the active version of WooCommerce
    Akismet Anti-Spam: by Automattic – 4.1.4
    Classic Editor: by WordPress Contributors – 1.5
    Duplicate Post: by Enrico Battocchi – 3.2.4
    Easy Theme and Plugin Upgrades: by Chris Jean – 2.0.1
    Elementor Pro: by Elementor.com – 2.8.5
    Elementor: by Elementor.com – 2.9.7
    EWWW Image Optimizer: by Exactly WWW – 5.2.5
    Force Regenerate Thumbnails: by Pedro Elsner – 2.0.6
    Google Analytics Dashboard for WP (GADWP): by ExactMetrics – 6.0.2
    Elementor - Header, Footer & Blocks: by Brainstorm Force
    Nikhil Chavan – 1.4.0
    
    Invisible reCaptcha: by Mihai Chelaru – 1.2.3
    Mailchimp for WooCommerce: by Mailchimp – 2.3.6
    Menu Icons: by ThemeIsle – 0.12.2
    Pinterest Verify: by Phil Derksen – 1.0.4
    Schema: by Hesham – 1.7.8.1
    SG Optimiser: by SiteGround – 5.4.6
    Shortcode Widget: by Gagan Deep Singh – 1.5.2
    Storefront Checkout Customiser: by WooThemes – 1.1.4 – Not tested with the active version of WooCommerce
    Storefront Designer: by WooThemes – 1.8.4
    Storefront Powerpack: by WooCommerce – 1.5.0
    Storefront Product Hero: by WooThemes – 1.2.13
    Title Toggle for Storefront Theme: by Wooassist – 1.2.4
    Storefront WooCommerce Customiser: by WooThemes – 1.9.2 – Not tested with the active version of WooCommerce
    Tabby Responsive Tabs: by cubecolour – 1.2.3
    TI WooCommerce Wishlist Plugin: by TemplateInvaders – 1.17.1
    UpdraftPlus - Backup/Restore: by UpdraftPlus.Com
    DavidAnderson – 1.16.23
    
    W3 Total Cache: by BoldGrid – 0.13.1
    Telr Secure Payments for woocommerce Repeat Billing: by Telr – 5.2 – Not tested with the active version of WooCommerce
    Checkout Field Editor for WooCommerce: by ThemeHigh – 1.4.2
    WooCommerce Blocks: by Automattic – 2.5.15
    Product Feed PRO for WooCommerce: by AdTribes.io – 7.8.4
    WooCommerce Admin: by WooCommerce – 1.0.3
    WooCommerce Cart Tab: by jameskoster – 1.1.2 – Not tested with the active version of WooCommerce
    WOOCS - WooCommerce Currency Switcher: by realmag777 – 1.3.1
    WooCommerce PayPal Checkout Gateway: by WooCommerce – 1.6.20 – Not tested with the active version of WooCommerce
    WooCommerce Product Vendors: by WooCommerce – 2.1.26 – 2.1.29 is available
    WooCommerce: by Automattic – 4.0.1
    Yoast SEO Premium: by Team Yoast – 13.4.1
    Asset CleanUp: Page Speed Booster: by Gabriel Livan – 1.3.6.0
    WhatsApp Chat: by QuadLayers – 4.6.3
    Yoast SEO: WooCommerce: by Team Yoast – 12.7
    
    ### Inactive Plugins (6) ###
    
    NavMenu Addon For Elementor: by ThemeIsle – 1.1.6
    Query Monitor: by John Blackbourn – 3.5.2
    Simple Author Box: by GreenTreeLabs – 2.3.16
    Smush: by WPMU DEV – 3.6.1
    StarBox: by Squirrly UK – 3.3.3
    WP Google Fonts: by Noah Kagan – v3.1.4
    
    ### Dropin Plugins (3) ###
    
    advanced-cache.php: advanced-cache.php
    db.php: db.php
    object-cache.php: object-cache.php
    
    ### Must Use Plugins (1) ###
    
    Elementor Safe Mode: by Elementor.com – 1.0.0
    
    ### Settings ###
    
    API Enabled: ✔
    Force SSL: –
    Currency: AED (AED)
    Currency Position: left
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    Connected to WooCommerce.com: ✔
    
    ### WC Pages ###
    
    Shop base: #138 - /shop/
    Basket: #139 - /basket/
    Checkout: #140 - /checkout/
    My account: #141 - /my-account/
    Terms and conditions: #1688 - /terms-conditions/
    
    ### Theme ###
    
    Name: Goshopia Theme
    Version: 2.2.8.1519750287
    Author URL: https://goshopia.com/
    Child Theme: ✔
    Parent Theme Name: Storefront
    Parent Theme Version: 2.5.5
    Parent Theme Author URL: https://woocommerce.com/
    WooCommerce Support: ✔
    
    ### Templates ###
    
    Overrides: –
    
    ### TI WooCommerce Wishlist Templates ###
    
    Overrides: –
    
    ### Action Scheduler ###
    
    Complete: 1,599
    Oldest: 2020-03-04 01:14:40 +0400
    Newest: 2020-04-04 01:06:45 +0400
    
    Pending: 2
    Oldest: 2020-04-04 01:45:35 +0400
    Newest: 2020-04-04 02:06:45 +0400
    
    

    Thanks a lot!

    Looking at the site code it looks like the “floating” header is due to the sticky header setting in the Storefront PowerPack plugin you’re using ( https://docs.woocommerce.com/document/storefront-powerpack/#sticky-header ) so you may want to try disabling that.

    It’ll let more of the site contents scroll into view instead of making sure that the logo/menu always stay on the screen.

    For the menu, you could try some CSS like the following to decrease the font sizes

    @media screen and (min-width: 768px ) {
    	.site {
            padding-top: 150px !important;
        }
        .site-header .secondary-navigation li a {
            font-size: 12px;
        }
        .storefront-primary-navigation li a {
            font-size: 14px;
        }
    }

    However, there appears to be some 287px of padding added to the top of the site (possibly from Elementor but not sure). The code above should also handle that on tablets and larger screens.

    Thread Starter gallegoara

    (@gallegoara)

    I think did what you mentioned and now it is back to “standard”.. Is it possible to reduce the empty spaces?
    Thanks a lot,

    Ara

    Which empty spaces in particular are you wanting to adjust? Just the area that you linked in the image above with the red arrow for the menu on mobile/tablet? If so, you could try something like this

    @media screen and ( max-width: 768px ) {
        .secondary-navigation {
            font-size: 14px;
        }
    }
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header Storefront’ is closed to new replies.