Home / Forums / You Theme Support / Mobile Menu – determined height

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • Paul
    Participant

    Dear Support,

    I would like to modify height of header menu however only on Mobile devices such as tablets (especially smartphones).
    Moreover I wanted to hide a Logo or keep this logo statically on the top.

    I have found at this forum below codding – how to hide the logo when screen reaches the width 760px (it works perfectly fine).
    @media screen and (max-width: 760px) { #logo img{ display: none; } }

    My question is, how to keep 60px Header’s ‘Menu Height’ for mobile devices (which has been set for standard browser).
    In other words this 60px works for normal browser but when I display the page on smartphone it’s growing by 300% (it looks like it make a space for logo which I hide with above codding).

    BR,
    Pawel

    Hi Pawel,

    Can you please send your site’s URL and login credentials so I can check how it looks on mobile?

    Thanks!~


    Paul
    Participant
    This reply has been marked as private.

    Hi Pawel,

    Please copy and paste this CSS into Theme Options > Custom CSS

    @media only screen and (max-width: 1024px){
    #header-logo {
        float: left;
        margin: 15px;
    }
    
    .dock-panel-wrap {
        float: right;
    }
    }

    This will format the header on mobile the same on desktop, thus the header height will remain the same.

    Add this CSS to have the font-size of the sticky menu be the same as the normal menu

    #primary-wrapper #header-wrap.stuck #acoda-tabs ul.dock-panel li.dock-tab a i {
        font-size: 1.85rem;
    }

    Then CSS to force the header to be 62px in height:

    header#header-wrap {
        height: 62px !important;
    }

    Thanks!


    Paul
    Participant

    Dear Support,

    thank you for that code. It was really helpful.
    I have few more questions.

    1. On mobile devices, the menu icon “three horizontal bars” are centered and lowered relative to my Logo.
    Q. It is possible to horizontally align the “three horizontal bars” & Logo.
    Q. Moreover, I would like to right-align the “three horizontal bars”. The Logo should stay left-align.

    2. On standard Web browsers (not mobile devices), when I scroll down any pages, on ‘sticky menu’ the Logo, as well as “three horizontal bars”, are slightly lowered vs. normal menu.
    Q. How to horizontally align the “three horizontal bars” & Logo on ‘sticky menu’?

    3. I have installed WPML plugin and I wanted to hide the default black flag and replaced them with these colorful flags from WPML.
    I found posts describing exactly this issue on this forum, however, the answer has been hidden, that’s why:
    Q. Can you please give me a hint how to resolve the above-mentioned problem?

    In case you need to connect to my WordPress please use the same credentials as previously (still active).

    Best regards,
    Pawel

    Hi Pawel,

    To fix item #1, copy and paste this CSS into Theme Options > Custom CSS > Mobile CSS

    .header-wrap-inner .dock-panel-wrap .dock-panels{
    padding: .5rem 0 0.9375rem;
    }
    
    #header #header-logo {
        margin-top: -62px;
    }
    
    .header-float-wrap ul.dock-panel.clearfix {
        text-align: right;
    }

    Item #2 the logo and the horizontal bars are aligned on the sticky menu. Can you please send us screenshots of how this looks from your end?

    For the third issue, this will be easy if you were using a normal menu as the WPML language switcher can be easily added before or after all items. It can also be added now but to the dock menu. One option with the current setup is to add the Language
    Switcher Widget to the ‘Header Panel’. This setup will require a lot of CSS to position the switcher properly.

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.