Home Forums Art WordPress Theme Phone/tablet responsive Headers and Hamburger menu on ipad

This topic contains 11 replies, has 2 voices, and was last updated by  BWSM 8 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #14807

    jlarchitect
    Participant

    Hello again!

    Now I have checked my website on mobile devices I have two further questions. Apologies in advance for my non-technical lingo – I am a complete beginner.

    1. My homepage, gallery and portfolio pages all display the main menu on a transparent header with all content from the top – and this looks great on a large screen. However, on the ipad/iphone the menu clashes with the images. Is it possible for the ipad/iphone version to have all content below a sticky header bar?

    2. Is there the option for displaying a hamburger menu on both ipad and iphone – including when devices are orientated landscape? At the moment, the full menu is displayed on the ipad and it looks crammed on the screen.

    thank you,

    JL

    #14808

    BWSM
    Keymaster

    Hi,
    Please try to paste the custom css code to “Appearance > Customize : Additional CSS”:

    @media (max-width: 767px) {
    .responsive-ux.page_from_top #wrap {
        padding-top: 80px;}
    }
    @media (max-width: 1024px) {
    .touchevents .responsive-ux.page_from_top #wrap {
        padding-top: 80px;} 
    .touchevents .responsive-ux .navi-trigger {
        display: block;  }
    .responsive-ux .ux-justified-menu .menu>li,.responsive-ux .head-meta, .responsive-ux .header-bar-social, .responsive-ux.navi-show-h.navi-show-h-center .head-meta, .responsive-ux.navi-show-h.navi-show-h-left .head-meta {
        display: none; }
    }

    If not work, plz leave your page url, thanks!

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #14827

    jlarchitect
    Participant
    This reply has been marked as private.
    #14830

    BWSM
    Keymaster

    Pleas add the custom css:

    .navi-show:not(.ux-mobile) .navi-trigger {
        display: block!important;
    }

    ..and the responsive header bar does not ‘stick’ as, for example, on the ‘info’ page..

    I don’t understand, please give more tips.

    #14845

    jlarchitect
    Participant
    This reply has been marked as private.
    #14848

    BWSM
    Keymaster

    Please send your question(this post url) and wp-admin(url/user/pass) to uiueux@gmail.com, I’ll log in to check it.

    #14862

    jlarchitect
    Participant
    This reply has been marked as private.
    #14870

    BWSM
    Keymaster

    Please update the css as:

    @media (max-width: 767px) {
    .responsive-ux.page_from_top #wrap {
        padding-top: 80px;}
    }
    @media (max-width: 1024px) {
    .touchevents .responsive-ux.page_from_top #wrap {
        padding-top: 80px;} 
    .touchevents .responsive-ux .navi-trigger {
        display: block!important;position: absolute; right: 40px; }
    .responsive-ux .ux-justified-menu .menu>li,.responsive-ux .head-meta, .responsive-ux .header-bar-social, .responsive-ux.navi-show-h.navi-show-h-center .head-meta, .responsive-ux.navi-show-h.navi-show-h-left .head-meta {
        display: none; }
    }
    #14939

    jlarchitect
    Participant

    Hello,

    In order to make some adjustments for the mobile device I’ve done the following. I added a background color of header-main to the css you gave me in @media (max-width: 767px). I am trying to figure out how reduce the height of the header, since it covers too much of the screen on a mobile device.

    I had managed it earlier, but I forgot which class or id and what property to change (line-height, height, max-height?) I needed to modify in css.

    Help would be greatly appreciated.

    JL

    #14947

    BWSM
    Keymaster

    Hi jlarchitect, please leave your page url, thanks!

    #14952

    jlarchitect
    Participant
    #14957

    BWSM
    Keymaster

    Hi,

    Please use the css, change 80px(default) as what you want

    @media (max-width: 767px) {
       .responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-text, .responsive-ux .header-main,.responsive-ux.navi-show-h .navi-logo, .responsive-ux.navi-hide .navi-logo, .responsive-ux.navi-hide .header-main > .container-fluid, .responsive-ux.navi-hide .header-main > .container, .responsive-ux .header-portfolio-icon,body.responsive-ux #header-main > .container-fluid,body.responsive-ux #header-main > .container,.responsive-ux #header, .responsive-ux .navi-logo .logo-wrap,.responsive-ux #woocomerce-cart-side  { height: 80px; } 
      .responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-text, .responsive-ux .header-main,.responsive-ux #header #logo .logo-text, .responsive-ux .navi-logo .logo-wrap,.responsive-ux #woocomerce-cart-side { line-height: 80px;  }
      .responsive-ux .logo-image { max-height: 80px; } 
      body.responsive-ux.ux-is-galllery-template-body.single-portfolio-fullwidth #title-wrap { padding-top: 80px; }
    }

    RG~

    • This reply was modified 8 months, 1 week ago by  BWSM.
    • This reply was modified 8 months, 1 week ago by  BWSM.
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!