New to the community? Start here

CSS Help – smaller devices and hamburger menu

Hi, Im currently using the WooCommerce Storefront Theme,

im having some issues with it when the screen resolution goes below 688px the menu changes to the Hamburger style one, and the whole black menu bar shifts down and looks a bit weird.

688px – looks ok – http://take.ms/HYOOu

687px or less – http://take.ms/D0IbJ (can the menu remain fixed to the top of the screen + Sticky menu so always at top)

Tested on Samsung Note 4 IE – http://take.ms/SSoWV (issue with menu) – Also Can the footer display as 100% width of device as well as the menu?

Domain – http://tinyurl.com/ounlhnf

Support access is ACTIVE until January 4, 2016 6:56 pm

Thanks

Tom

Fri, 1 Jan 2016 22:54:45
  • Tyler Postle
    • Recruit

    Hey Tom,

    Hope you had a good new years!

    Try adding this CSS to your custom stylesheet:

    /* Responsive CSS */
    
@media only screen (max-device-width: 767px) {
    
#page.hfeed.site {
    
padding-top: 0 !important;
    
}
    

    
header#masthead {
    
position: fixed;
    
}
    
}

    I see you have two within your Appearance menu. It should work inside either of them.

    When I tested the breakpoint it looks like it’s actually at 767px; however, if it is still 687px for you then you can change that value if needed.

    Hope this helps!

    Cheers,

    Tyler

  • Tyler Postle
    • Recruit

    Hey Tom,

    I made a couple changes to the CSS is now this:

    /* Responsive CSS */
    
@media only screen (max-device-width: 767px) {
    
div#page.hfeed.site {
    
padding-top: 0 !important;
    
}
    

    
#masthead.site-header {
    
position: fixed !important;
    
width: 100% !important;
    
}
    
}

    However, it’s still not applying the fixed position style. It’s still taking your themes CSS style over it, which it shouldn’t be. Can you make sure all server side cache and on-site caching is cleared out then check again?

    I tried purging your on-site cache but it didn’t seem to work. Just wondering if you have anything on the server side as well.

    Look forward to hearing back.

    Cheers,

    Tyler

  • Tom
    • Code Wrangler

    Hi Tyler,

    I tried flushing the master cache for all sites on the server. and Clear browser cache and re-tested but still not taking effect of the changes ?

    Could part of the issue be that the Product images displayed on the mobile device screen are too large and therefore increasing the page width ? as when i zoom out to fit all content on the page the products are centred in the page but the top menu and bottom footer are both not fully extended to the edges. If therefore only on mobile device or when resolution falls below the 767px width maybe those images can be moved more to the left ? or reduced size by 1/3 it might give full width ?

    Screenshots

    – http://take.ms/Qgnnm

    – http://take.ms/Ywmve

    – http://take.ms/FkJqQ

    – http://take.ms/4xJWV

    – http://take.ms/oBaGw

    Additionally with the Hamburger Menu is it possible to remove it? and replace it with an alternative menu ?

    I have added a plugin to allow for images to be added to the menu items. Can the show when the hamburger menu is activated instead of it ? So When 767px + Regular menu with no icons. Then When below 767px only the image icons are shown with no text?

    Also can all the icons be made to be the same size? currently the Shop is to large can it be reduced to be the same as the others – http://take.ms/Y6Ila

    Thanks

    Tom

  • Tom
    • Code Wrangler

    Hi, & Thanks @Jude for live chat a few moments ago, Just to Update the thread, with regard to the menu + Icons which is mostly solved. The remaining issue is as follows:

    the display/ CSS of the site on mobile devices please?

    Domain – http://tinyurl.com/ounlhnf

    Support access is ACTIVE until January 7, 2016 3:54 am

    Currently when viewed on smaller devices the Menu and Footer area’s mess up a little, either not being fully extended to the right or they are shifted vertically to places they should not be. Ideally the Header remains sticky at the top of the page always seen. and the footer remains fixed to the bottom of the page only seen when user scrolls down to the end of the page.

    Here are some screenshots of what it currently looks like on mobile device

    Top bar – http://take.ms/Qgnnm

    Footer bar – http://take.ms/oBaGw

    It looks like part of the issue might be the image sizes of products which are shifting everything else out of balance at least for the main shop page

    – http://take.ms/Qgnnm

    – http://take.ms/Ywmve

    Secondly the Grid for the smaller Thumbnails are bit too large, can they be decreased when viewed on mobile device so that its fixed to 3 or 4 wide below the main larger image so that they take less space vertically ?

    – http://take.ms/FkJqQ

    And could you also help with the CSS layouts of the “Add to Cart & Upload files” Button so that it is centred in the page (For mobile devices) + Also create some kind of visual separation between the three tabs (Description / Additional Information / Reviews) perhaps | <- as a separator or create a shaded tab behind each with a gap so that they are more visible ?

    – http://take.ms/4xJWV

    Thanks

    Tom

  • Tyler Postle
    • Recruit

    Hey Tom,

    Hope you’re doing well today!

    It doesn’t really look like the product grid is responsive at all. Neither plugin involved here is ours so you may want to ask the developer about this to see what they say.

    When I visit your site on my iPhone, I get the following fatal error:

    Fatal error: Call to undefined function storefront_sanitize_hex_color() in /wp-content/plugins/storefront-footer-bar.php

    So looks like you have any issue happening with that plugin, try deactivating that and see if you still have the footer issues.

    As for centering the add to cart and uploads files button you can try this CSS:

    .variations_button {
    
margin: 0 auto;
    
width: 55%;
    
}

    Also create some kind of visual separation between the three tabs (Description / Additional Information / Reviews) perhaps | <- as a separator or create a shaded tab behind each with a gap so that they are more visibl

    I see you have vertical tabs now so this is all good? :slight_smile:

    Cheers,

    Tyler