Phone/tablet responsive Headers and Hamburger menu on ipad

[jlarchitect]

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

[SeaTheme]

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.com – Twitter – Facebook

[jlarchitect]

This reply has been marked as private.

[SeaTheme]

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.

[jlarchitect]

This reply has been marked as private.

[SeaTheme]

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

[jlarchitect]

This reply has been marked as private.

[SeaTheme]

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; }
}

[jlarchitect]

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

[SeaTheme]

Hi jlarchitect, please leave your page url, thanks!

[jlarchitect]

http://xve.87e.myftpupload.com/

[SeaTheme]

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~

[Author]

Posts