Mobile masthead display

pideja · 2017-03-24 21:32:04

Still working on this test site pideja.ca/nat.
For some reason, the mobile version fails to display the Home page masthead. Looked around everywhere, can't find what is the problem. The image (masthead) is below the navigation (Fr and En) and is 700x500. Could it be too large for the tablet and the phone?

rod barbee · 2017-03-24 22:01:47

have you looked under the Masthead settings? There's an option to hide on mobile. What's that set at?

rod barbee · 2017-03-24 22:25:57

and in case you didn't see it, it looks like navigation is disabled in the tray.

pideja · 2017-03-24 22:34:21

The Masthead settings:
- Location: Main Collumn;
- Identity on Mobile : Display in UI Bar : on
- Text Align : Center

The Navigation Trays set to Show Always.

Last edited by pideja (2017-03-24 22:35:04)

rod barbee · 2017-03-24 22:41:17

with those setting, a text-based identity will show in the UI bar

What is the setting in Masthead > Hide on Mobile?

rod barbee · 2017-03-24 22:43:28

The Navigation Trays set to Show Always.

you probably want that set to On Mobile.

pideja · 2017-03-24 23:20:59

Rod wrote:

you probably want that set to On Mobile.

I set it to On Mobile. Navigation now back.

As for

What is the setting in Masthead > Hide on Mobile?

I can't find it in the Masthead section.

rod barbee · 2017-03-24 23:29:51

In your Page template, go to the Masthead section. It's the third item.

pideja · 2017-03-24 23:51:14

Well, on my Backlight Standard Page, no such item shows up.
navigation

rod barbee · 2017-03-25 00:13:06

looks like the reason this is happening is that you're putting the masthead in the main column. The Hide on Mobile option is not available for this configuration. It looks like the masthead is hidden automatically.
You could try overriding this with custom css.

This is the css that's making the masthead disappear:

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

  .masthead { 
  	display: none;
  }

}

you could try using this same rule in custom css, just change display: none; to display: block;

I don't know what the side effects might be. You may need additional styling to make it appear as you wish.

pideja · 2017-03-25 05:17:55

Two steps forward, one step back...

I now put the masthead in the header position. Result: it is completely to the left and the navigation is under the masthead.

I need the navigation to be over the masthead, the image centered on the page.

Also, after putting the masthead in the header, the "Hide on Mobile" is there, but grayed out and stuck on off.

The image shows up on the mobile (and, I assume on the tablet) although it's quite small.

Anyway, to get those navigation links in a natural form and above the masthead? There is a lot of white space on the vertical (phone) screen.

rod barbee · 2017-03-25 06:02:28

As far as I can tell, the only configuration where you can have the nav over the masthead is by putting the masthead in the main column.

overriding that with custom css as I mentioned above seems to work. I've only tried it by resizing the browser so far; I haven't checked on a mobile device. But give that a try. Just set display: block; instead of display:none;

Edit: looks like it works fine on mobile devices too. Here's an example page
http://backlight-rb-test.barbeephoto.com/nav-at-top.php

Community @ The Turning Gate

#1 2017-03-24 21:32:04

Mobile masthead display

#2 2017-03-24 22:01:47

Re: Mobile masthead display

#3 2017-03-24 22:25:57

Re: Mobile masthead display

#4 2017-03-24 22:34:21

Re: Mobile masthead display

#5 2017-03-24 22:41:17

Re: Mobile masthead display

#6 2017-03-24 22:43:28

Re: Mobile masthead display

#7 2017-03-24 23:20:59

Re: Mobile masthead display

#8 2017-03-24 23:29:51

Re: Mobile masthead display

#9 2017-03-24 23:51:14

Re: Mobile masthead display

#10 2017-03-25 00:13:06

Re: Mobile masthead display

#11 2017-03-25 05:17:55

Re: Mobile masthead display

#12 2017-03-25 06:02:28

Re: Mobile masthead display

Board footer