Okay
  Public Ticket #1430283
Mobile header height
Closed

Comments

  •  2
    Basile started the conversation

    Hello, 

    I'd like to reduce the header height on mobile but I can't find any option to do so. Can you help ?

    Thanks

    Basile

  •  1,137
    Qode replied

    Hi Basile, 

    There is no option to reduce/change the mobile header height - it is always 100px. 

    You can try to do it via CSS - add the following code into Qode Options -> General -> Custom CSS field: 

    @media only screen and (max-width: 1000px) {
        .logo_wrapper {
            height: 40px !important;
        }
        .mobile_menu_button {
            height: 40px;
        }
        .shopping_cart_inner, .side_menu_button {
            height: 40px!important;
        }
        .q_logo a {
            height: 40px !important;
        }
    }
    

    ...and replace 40px with desired header height. 

    If this does not help, send us your site URL. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  2
    Basile replied

    Hello,

    I applied the custom css but then there are 2 display issues : 

    1. The menu icon is not centre

    2. On scroll down the header's height decreases and cut the logo

    (see attached 2 screenshots)

    Here is the site url: http://www.amuse-a-muse.com 

    Attached files:  Screenshot_20180116-132127.png
      Screenshot_20180116-132136.png

  •  1,137
    Qode replied

    Hi Basile, 

    Thank you for your feedback. 

    Please try with the following custom CSS instead: 

    @media only screen and (max-width: 1000px) {
        .logo_wrapper {
            height: 40px !important;
        }
        .mobile_menu_button {
            height: 40px;
        }
        .shopping_cart_inner, .side_menu_button {
            height: 40px!important;
        }
        .q_logo a, 
        .q_logo a img {
            height: 40px !important;
        }
    }
    

    If you want to make the mobile logo graphic larger, open logo image in your photo editor and crop transparent areas above and below the logo graphic: 

    https://monosnap.com/file/0xaW8JQAakYqVD2mDtfEHUmuBWQqdX

    Save it as PNG and re-upload it. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode