standard navigation does not disappear on smaller screen resulution

rolf · 2017-01-11 17:15:46

First: Thank you for Backlight. It is a great tool! So much easier to work with.

My Problem:
The navigation bar does not disappears on smaller window sizes. When I reduce the screen size the hamburger navigation appears but the standard navigation stays in place. Normaly it shoud disappear.

my site: http://neu.koerner-kunst.de

Thank you for help
Cheers Rolf

Rainer Goergen · 2017-01-11 19:02:03

Hallo, im Backlight Admin rufe die Template Seite auf. Im Bereich - Design - deines Templates müsste unter - Navigation, Header - Display on Desktop - eingestellt sein, das ist richtig.

Der Fehler bei dir müsste sein, dass unter - Page Layout - der Breakpoint zum Wechsel in den mobilen Modus zu hoch gesetz ist. Stelle diesen mal auf 992 px.

So wird beispielsweise bei mir auf dem iPad im horizontalen Modus die Desktopseite mit Menu Bar angezeigt, im vertikalen Modus die mobile Seite nur mit Hamburger Symbol aber ohne Menu Bar. Einstellung unter - Navigation, Trays - ist - on Mobile -.

Rufe mal meine Seite auf zum checken.

Rainer

Last edited by Rainer Goergen (2017-01-11 19:03:18)

rolf · 2017-01-11 20:04:47

Hallo Rainer,

danke für deine Hilfe. Ich habe die Einstellungen überprüft, alle Breakpoints stehen auf 992px. Das Problem ist, die Navigation verschindet gar nicht, egal wie klein das Browserfenster wird.
Bei Deiner Site ist alles ok und die Navigation verschwindet ab einer bestimmten Stelle.
Hm, das ist es nicht ….

thank you for your help. I checked the Breakpoint settings under „Page Layout“. They are set at 992px. so, that seems to be ok.
The problem is, my navigation never disapper regardless how small the browser window is.
I checked your site. Everything is working like expected and the navigation disappears at a certain point.

Rolf

Rainer Goergen · 2017-01-11 20:19:38

Kann es sein, dass Du den Code für die Menüleiste in Pages in - Page Copy - eingefügt hast? Dann ist sie immer sichtbar.

Rainer

rolf · 2017-01-11 20:25:44

nein, ich habe die Navigation über Backlight > Designer > Menu Sets angelegt.

Rainer Goergen · 2017-01-11 20:36:07

Mit deiner Menu Bar ist was faul. Klick mal hier drauf http://neu.koerner-kunst.de/backlight/c … custom.css
da kommt zwar ne Fehlermeldung aber mit einer anderen Menu Bar die auf Mobilgeräten funktioniert.

Hast Du die Menu Links richtig zugewiesen? Und unter - Edit Menu Set - Default - yes - ?

R.

Last edited by Rainer Goergen (2017-01-11 20:41:31)

Rainer Goergen · 2017-01-11 20:57:04

Ok, ich glaube ich habe es gefunden:

In den Template Einstellungen ganz nach unten scrollen.
Da steht:

- Other Advanced Options - Disable Navigation Styling and Scripting -

Die hast Du auf - on - gesetzt. Schalte auf - off - und es müsste klappen.

Rainer

rolf · 2017-01-11 22:29:57

Ich habe den Fehler gefunden. Ich hatte einen Fehler in meinem Custom Style sheet. Dort fehlte doch tatsächlich nur eine geschwungene Klammer. Nachdem ich diese eingefügt habe, funktioniert nun alles korrekt.

Lieben Dank für Deine Hilfe, Rainer!
Rolf

ps. Du schreibst:
- Other Advanced Options - Disable Navigation Styling and Scripting -
Die hast Du auf - on - gesetzt. Schalte auf - off - und es müsste klappen.

wie bzw. wo kannst Du das sehen?

Rainer Goergen · 2017-01-11 23:05:57

War eine Vermutung. Habe das auf on gesetzt und da war der gleiche Fehler.
Das mit der Klammer hatte ich auch mal, deshalb wollte ich deine .css ansehen was aber nicht klappte.
Das war meine erste Vermutung.

Grüsse,

Rainer

rod barbee · 2017-01-12 04:59:05

The site looks like it's functioning as intended. Did you get it all worked out then?

rolf · 2017-01-12 05:30:04

Hi Rod,

thank you for asking.
Yep, everything is up and running ...

The problem was a missing curly bracket in my custom stylesheet.

Cheers Rolf

rod barbee · 2017-01-12 07:07:25

that'll do it

Markus · 2017-02-27 22:11:30

Hello,
I also have problems with my mobile navigation and the burger menue (I use Backlight version 1.1.1):

On my start side the burger menue appears on the right corner but it´s empty ☹
On Top-level Gallery the burger menue is on the left site. Ok, the size of the font for the mobile version, I have to change something

On Gallery Pages you will find the burger menu again on the right side.

But where can I find the setting for the different sites? I have already searched everything, but so far nothing found.
And why is the menu on the start site completely empty?

The settings, which Rainer enumerates, I have already checked

Does anyone have a tip for me

Many Greetings
Markus

rod barbee · 2017-02-27 22:24:37

Two places to check. In your Page templates look under:

Page Layout > Columns Layout to set which side of the page the trays appear.

Navigation, Trays > Display, make sure "On Mobile" is checked.

The reason that the mobile menus are appearing on different sides of the pages is because those pages are using different page templates.

Markus · 2017-02-27 22:37:38

Hi Rod,

rod barbee wrote:

Page Layout > Columns Layout to set which side of the page the trays appear.
Now I put all templates on "right"

rod barbee wrote:

Navigation, Trays > Display, make sure "On Mobile" is checked.
That was previously set

Now the first point is still open. The burger menu is still empty. Where could the error be?

Markus

rod barbee · 2017-02-28 00:05:42

Double check the page template being used for your Home page. Make sure that under Navigation, Trays that Display is set to Mobile.
Also make sure you've got the navigation assigned to the proper tray (Tray 01)

Markus · 2017-02-28 15:46:28

rod barbee wrote:

Also make sure you've got the navigation assigned to the proper tray (Tray 01)

Thanks Rod, (Tray01) seems to be the solution

BTW: In this post you have explained the change at the drop down menu.
Is there a way to reduce the font size in the dropdown menu only for the mobile view? Or maybe even use a different font?
I think, this will work in custom.css?

Just discovered:
Your menu for the mobile view I like really good, great! You did this in the / * Mobile menu styling, right?

Markus

rod barbee · 2017-02-28 21:56:34

I don't think I've done anything special with the mobile menu on my test site. (My main site at rodbarbee.com is still a CE4 site and its mobile menu is completely different)

But yes, you can use custom CSS to control fonts in the mobile menu.

Markus · 2017-02-28 23:26:18

rod barbee wrote:

I don't think I've done anything special with the mobile menu on my test site. (My main site at rodbarbee.com is still a CE4 site and its mobile menu is completely different)

I personally like the however more than in backlight

rod barbee wrote:

But yes, you can use custom CSS to control fonts in the mobile menu.

ah, ok. I´ll take a look

Markus · 2017-03-05 03:40:02

Hi all,

ok, the font size I could reduce. At the same time I have increased the width of the menu in my custom.css (so far only on Home)

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

.page__tray ul.menu a, .page__tray ul.menu a:visited, .page__tray ul.menu span {
	font-size: 18px;
}

Is there a way to create a text break in the menu if the entry is too long? (e.g. "San Bartholomé de Tirajana"?)

Now I have to reduce the dark overlay. I have found this place through the Inspector, which in my opinion regulates it.

label.page__overlay.spinal__column {
	transform: translate3d(-250px, 0%, 0);
}

But this does not work. Perhaps a mistake in the construction.

If I make the setting in the Inspector, exactly at this point, everything is as it should be.

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(-190px, 0%, 0);
transform: translate3d(-250px, 0%, 0);

Does anyone know where the error might be?

Thanks
Markus

rod barbee · 2017-03-05 03:55:30

ok, the font size I could reduce. At the same time I have increased the width of the menu in my custom.css (so far only on Home)

This should work for all page's using the same page template to which you're applying the custom css.

Now I have to reduce the dark overlay. I have found this place through the Inspector, which in my opinion regulates it.

You can do this in the Designer under UI Styling > Overlays

Is there a way to create a text break in the menu if the entry is too long? (e.g. "San Bartholomé de Tirajana"?)

I don't think so

Markus · 2017-03-05 04:15:16

rod barbee wrote:

ok, the font size I could reduce. At the same time I have increased the width of the menu in my custom.css (so far only on Home)
This should work for all page's using the same page template to which you're applying the custom css.

I´ve different custom.css and one for Home because of the slideshow.

rod barbee wrote:

Now I have to reduce the dark overlay. I have found this place through the Inspector, which in my opinion regulates it.
You can do this in the Designer under UI Styling > Overlays

But in UI styling I can unfortunately not adjust the width of the overlay. So I wanted to do this. The value is currently -190px

label.page__overlay.spinal__column {
	transform: translate3d(-250px, 0%, 0);
}

Markus

rod barbee · 2017-03-05 05:17:46

translate3d(-190px ..) is not a width, it's a movement.

This looks like it might be the css that controls the width of tray on mobile devices:

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

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

This width appears to be initially set in the template under Tray Columns. But if you need to override that for some reason, try the above css.

You may need to change the data-position values to suite your own columns/trays layout.

Markus · 2017-03-05 21:25:08

rod barbee wrote:

translate3d(-190px ..) is not a width, it's a movement.

Ok, I understand. Unfortunately, your suggestion does not work. This is currently my code in custom.css for mobile navigation

/*Mobile Menu Anpassung*/
@media screen and ( min-width: 282px ) and ( max-width: 1024px ) {
	.page__tray[data-position="T1"], .page__tray[data-position="T2"] {
    width: 250px;
	}
	.page__mobile {
		display: block;
		float: left;
		left: auto; right: 0;
		margin: 6px 6px 24px 24px;
		width: auto;
	}
	.page__mobile .page__title {
		width: 200px;
		display: none;
	}
	.page__header, 
	.page__columns {
		margin-top: 0;
		padding-top:0;
	}
	.page__tray ul.menu a, .page__tray ul.menu a:visited, .page__tray ul.menu span {
	font-size: 16px;
	}
	div.page__column.page__tray {
	width: 250px;
	}
}

Can it be that this expression has something to do with it?

#page__toggle__T1

Markus

rod barbee · 2017-03-05 23:23:06

What exactly are you trying to accomplish?
Can you post a link so we have something to see? I don't see a mobile menu icon on the backlight site in your signature

#page__tiggle__T1 might have something to do with it, or not. It's an ID.

Community @ The Turning Gate

#1 2017-01-11 17:15:46

standard navigation does not disappear on smaller screen resulution

#2 2017-01-11 19:02:03

Re: standard navigation does not disappear on smaller screen resulution

#3 2017-01-11 20:04:47

Re: standard navigation does not disappear on smaller screen resulution

#4 2017-01-11 20:19:38

Re: standard navigation does not disappear on smaller screen resulution

#5 2017-01-11 20:25:44

Re: standard navigation does not disappear on smaller screen resulution

#6 2017-01-11 20:36:07

Re: standard navigation does not disappear on smaller screen resulution

#7 2017-01-11 20:57:04

Re: standard navigation does not disappear on smaller screen resulution

#8 2017-01-11 22:29:57

Re: standard navigation does not disappear on smaller screen resulution

#9 2017-01-11 23:05:57

Re: standard navigation does not disappear on smaller screen resulution

#10 2017-01-12 04:59:05

Re: standard navigation does not disappear on smaller screen resulution

#11 2017-01-12 05:30:04

Re: standard navigation does not disappear on smaller screen resulution

#12 2017-01-12 07:07:25

Re: standard navigation does not disappear on smaller screen resulution

#13 2017-02-27 22:11:30

Re: standard navigation does not disappear on smaller screen resulution

#14 2017-02-27 22:24:37

Re: standard navigation does not disappear on smaller screen resulution

#15 2017-02-27 22:37:38

Re: standard navigation does not disappear on smaller screen resulution

#16 2017-02-28 00:05:42

Re: standard navigation does not disappear on smaller screen resulution

#17 2017-02-28 15:46:28

Re: standard navigation does not disappear on smaller screen resulution

#18 2017-02-28 21:56:34

Re: standard navigation does not disappear on smaller screen resulution

#19 2017-02-28 23:26:18

Re: standard navigation does not disappear on smaller screen resulution

#20 2017-03-05 03:40:02

Re: standard navigation does not disappear on smaller screen resulution

#21 2017-03-05 03:55:30

Re: standard navigation does not disappear on smaller screen resulution

#22 2017-03-05 04:15:16

Re: standard navigation does not disappear on smaller screen resulution

#23 2017-03-05 05:17:46

Re: standard navigation does not disappear on smaller screen resulution

#24 2017-03-05 21:25:08

Re: standard navigation does not disappear on smaller screen resulution

#25 2017-03-05 23:23:06

Re: standard navigation does not disappear on smaller screen resulution

Board footer