Home Forums ePix Support Responsive Mobile menu position

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #45425
    Barnaby Aldrick
    Barnaby Aldrick
    Participant

    Hi there – On my desktop site I’m designing a sticky side menu (not in a sidebar), but when it’s set to responsive I’m not a huge fan of the mobile menu defaulting to the top of the page. I’ve noticed on another ePix site that the mobile site can have a top menu when viewed in Portrait mode, but when rotated to landscape mode, the menu moves to the side. So my question is:

    Is there an easy way to specify menu bar position to the side in landscape orientation on mobile devices?

    I couldn’t find an answer in the formum, and have tried setting the page layout to one sidebar & putting a custom menu widget in it, but it still ends up at the top on mobile versions.

    Thanks as ever!

    #45437

    Tom ( Support)
    Keymaster

    Hi,

    This is set by media queries within the CSS file. You can edit these in the file, responsive.css. ePix/stylesheets/responsive.css.

    If you search for @media only screen and for example, it will come up with the correct code to look for.
    Hope this helps.

    Kind regards,
    Tom

    #45544
    Barnaby Aldrick
    Barnaby Aldrick
    Participant

    Thanks Tom – I’ve dug out the responsive.css and have found the ‘@media only screen and’ section, but am at a bit of a loss on which to change to affect the side menu in landscape format on iPads & iPhones? The code I have is as follows:

    /* ————————————————–
    :: Mobile Visibility Affordances
    —————————————————*/

    @media only screen and (max-device-width : 480px) {
    .stage .caption.title h3,
    .stage .caption.title h3 a {font-size:20px;}
    .stage .caption.content {display:none;}
    }

    .show-on-phones { display: none !important; }
    .show-on-tablets { display: none !important; }
    .show-on-desktops { display: block !important; }

    .hide-on-phones { display: block !important; }
    .hide-on-tablets { display: block !important; }
    .hide-on-desktops { display: none !important; }

    /* Modernizr-enabled tablet targeting */
    @media only screen and (max-width: 1280px) and (min-width: 768px) {
    .touch .hide-on-phones { display: block !important; }
    .touch .hide-on-tablets { display: none !important; }
    .touch .hide-on-desktops { display: block !important; }

    .touch .show-on-phones { display: none !important; }
    .touch .show-on-tablets { display: block !important; }
    .touch .show-on-desktops { display: none !important; }
    }

    @media only screen and (max-width: 767px) {
    .hide-on-phones { display: none !important; }
    .hide-on-tablets { display: block !important; }
    .hide-on-desktops { display: block !important; }

    .show-on-phones { display: block !important; }
    .show-on-tablets { display: none !important; }
    .show-on-desktops { display: none !important; }
    }

    @media only screen and (max-width: 768px) {
    .gallery-wrap .animator-wrap {display:none !important;visibility:hidden;}
    .show-on-tablets { display: block !important; }
    }

    /* Specific overrides for elements that require something other than display: block */

    table.show-on-desktops { display: table !important; }
    table.hide-on-phones { display: table !important; }
    table.hide-on-tablets { display: table !important; }

    @media only screen and (max-width: 1280px) and (min-width: 768px) {
    .touch table.hide-on-phones { display: table !important; }
    .touch table.hide-on-desktops { display: table !important; }
    .touch table.show-on-tablets { display: table !important; }
    }

    @media only screen and (max-width: 767px) {
    table.hide-on-tablets { display: table !important; }
    table.hide-on-desktops { display: table !important; }
    table.show-on-phones { display: table !important; }
    }

    Do I edit this file directly or copy and paste Custom CSS into the site?

    Sorry if this is asking too much when I should be paying for custom CSS! It’s just I’m not massively familiar with coding and what these commands affect.

    Cheers as ever!!

    #45561

    Tom ( Support)
    Keymaster

    Hi,

    As this is not a standard theme option, it is classed as a customization. You can view the comprehensive Custom CSS screencast here, this will give you more information on how to customize elements. On the other hand, you can request customizations through the customization forum here.

    Kind regards,
    Tom

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

You must be logged in to reply to this topic.

© 2019 Acoda