standard navigation does not disappear on smaller screen resulution

rod barbee · 2017-03-06 01:34:53

this code:

@media screen and ( min-width: 282px ) and ( max-width: 1024px ) {

.page__tray[data-position="T1"], .page__tray[data-position="T2"] {
    width: 300px;
}
}

all by itself in custom css actually does work. I placed just this bit at the end of my own custom css file and changed the width value. The mobile tray width changed each time I changed it.
If overriding the width of the tray on mobile devices is what you want to do, that code is working for me. Again, this will depend on the page's column layout that you're using. Is the tray set to the right or the left?

Markus · 2017-03-06 05:15:43

Oh, sorry. The link already stood higher, so I thought that would not be necessary again. Here is my home page

Der Canonier - Home. The breakpoint for the mobile menu is at 992px.

The width from the menu is 250px (right side):

div.page__column.page__tray {
width: 250px;
}

But the movement is only 190px (left side), translate3d(-190px ..)

Therefore the left part of the mobile menu is hidden. And I want to change that 240-250px. Also in backlight I have found no way to change this value. This is probably the default value.

Christian has set the value in his mobile menu to 240px (translate3d (240px, 0%, 0);) http://www.gosslar.homedns.org/?page=about. But I don´t now how.

Markus

rod barbee · 2017-03-06 06:47:18

Christian has set the value in his mobile menu to 240px

there's nothing in his custom css that addresses this.

what version of Backlight are you using? This is looking like a z-index issue that I believe was addressed in v1.1.1

Markus · 2017-03-06 07:08:13

rod barbee wrote:

there's nothing in his custom css that addresses this.
what version of Backlight are you using? This is looking like a z-index issue that I believe was addressed in v1.1.1

That also surprised me, that I found nothing in his custom.css

I use TTG Backlight version: 1.1.1

rod barbee · 2017-03-06 07:21:00

hmm. Is this an update from a previous version? if so, have you cleared your template cache?

Frankly, the css controlling the tray behavior is a bit beyond me. You'll probably need Matt to take a look.

Markus · 2017-03-06 17:03:06

rod barbee wrote:

hmm. Is this an update from a previous version? if so, have you cleared your template cache?
Frankly, the css controlling the tray behavior is a bit beyond me. You'll probably need Matt to take a look.

Yes, it is an update and now I´d cleared the cache.

I have yet discovered a place where these values are set: Style-Sheets -> resource.php

At line 2206 seems to be the place

} /* @media */

@media screen and ( min-width: 223px ) and ( max-width: 992px ) {
                            /* 280px / 0.85 ~= 330 */

  .page__tray[data-position="T1"], 
  .page__tray[data-position="T2"]{
    width: 240px;
  }

  body[data-effect~="push"][data-layout~="1col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(-240px, 0%, 0);
    transform: translate3d(-240px, 0%, 0);
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(190px, 0%, 0);
    transform: translate3d(190px, 0%, 0);
  }

When I change this in the Inspector, than it works perfect. Is it advisable to change this file? But where I find this file on my FTP?

I find the great resource.php neither in the admin, nor in custom or elsewhere...

@Matt: can you please check once, which is somewhere adjustable

Thanks
Markus

rod barbee · 2017-03-06 22:04:30

The resources.php style sheet is not editable. It's assembled on the fly from several sources.

I don't know where the translate number comes from, perhaps it's calculated based on tray width, number of columns, and page width, all set in the Designer.

Matthew · 2017-03-06 22:22:04

All of the CSS is in a folder, /css, in the album module. You should not edit these files, but can override styling using PHPlugins and a custom stylesheet. The parts of the layout you're messing with utilize CSS3 flexbox properties, and are a bit finicky; I spent a long time, lots of trial and error and research, iterating the layout framework, experimenting with browser compatibility -- which for flexbox, is quite a complicated matter. It all works well as is, but I would be very cautious making edits.

Markus · 2017-03-06 22:48:02

Thanks Rod and Matt, after checking all the settings again, I found the crucial setting.
Under "TrayColumns -> TrayWidth (s)"

Before I had the tray left and had it thought of as a sort of overview. I have not established the context to the mobile menu.

Now I have times to examine how this affects the gallery pages. Here http://www.der-canonier.de/galleries/03 … /03-insel/ is the tray with context on a Mac or PC. And in the mobile version this tray is empty.

I´ll look in the evening.

Markus

rod barbee · 2017-03-06 22:52:01

you can assign the location of the mobile navigation in the Designer under Navigation, Trays

Community @ The Turning Gate

#26 2017-03-06 01:34:53

Re: standard navigation does not disappear on smaller screen resulution

#27 2017-03-06 05:15:43

Re: standard navigation does not disappear on smaller screen resulution

#28 2017-03-06 06:47:18

Re: standard navigation does not disappear on smaller screen resulution

#29 2017-03-06 07:08:13

Re: standard navigation does not disappear on smaller screen resulution

#30 2017-03-06 07:21:00

Re: standard navigation does not disappear on smaller screen resulution

#31 2017-03-06 17:03:06

Re: standard navigation does not disappear on smaller screen resulution

#32 2017-03-06 22:04:30

Re: standard navigation does not disappear on smaller screen resulution

#33 2017-03-06 22:22:04

Re: standard navigation does not disappear on smaller screen resulution

#34 2017-03-06 22:48:02

Re: standard navigation does not disappear on smaller screen resulution

#35 2017-03-06 22:52:01

Re: standard navigation does not disappear on smaller screen resulution

Board footer