Docs

[mateoserendipia]

Hi,

I can’t seem to get the mobile navigation right on a site that i’m building. It’s a one-page site, and the navigation is working fine on desktop and tablet. But on a mobile phone the site jumps to (very) incorrect positions. Tried and checked everything (also this forum), but i can’t find the cause, and am stuck now. Would you have any idea how to solve this? Details are in next comment.

Thanks!

[mateoserendipia]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove custom ID from column and instead add it in section’s ID field to fix this issue.

Thanks.

[mateoserendipia]

Hi,

Thanks for the answer, but that will not work. The page has two sections only: the first contains the foto, and the second contains all text (divided in rows). The second section is moved up to cover the photo. so the custom ID’s are attached to the rows, and this works fine with navigation at all sizes of screens, but not at mobile view.

Any other suggestions?

Thanks!

[Christopher]

Hi there,

One page navigation works with section’s ID not rows. If you want to setup one page navigation, please edit your page and add some sections . Add ID to sections and check one page functionality.

Thanks.

[mateoserendipia]

Hi,

Thanks for the answer. It’s a bit confusing: at large screens the one page navigation on rows and column ID’s works perfectly fine, but it seems to go wrong when the site is forced into one column at mobile phones.

I made ca opy of the page (home test 2) and put every item into it’s own section as suggested by you – this works fine.

The problem that I now need to solve is that of the photo. As shown in the original homepage (home), I would like the photo to sit under all text blocks. This is the reason why I had placed all text in rows in one section, so that it was easy to move that entire section up by reposition it to the start of the page (through css).

In the new setup with everything in separate sections this doesn’t work any longer. Would there be a way to achieve the same effect?

The old page with the intended effect is here:

Home

and the new page divided in sections is here, the photo is the bottom:

Home

Thanks!

[Jade]

Hi there,

Please try to add this CSS to the customizer:

.page-id-211 .cs-content {
    position: relative;
}

.page-id-211 .x-section.foto {
    position: absolute;
    width: 100%;
    z-index: 0 !important;
    top: 0;
}

.page-id-211 .x-section {
    z-index: 1;
}

Hope this helps.

[mateoserendipia]

Hi Jade,

Thank you for the answer! This only works partially: it moves the photo up, but the photo now covers the rest of the content (instead of sitting underneath it). I had managed to come this far yesterday as well, but for some reason that I could not figure out, the Z-index-order doesn’t have any influence. I tried a negative z-index for the photo, but this makes it disappear altogether… Could you please have a look?

I added a little transparency to the photo to make things more clear, you can now see the content hiding underneath it. It should be the other way around.

Home

Thanks again!

[Christopher]

Hi there,

Please remove the CSS code we provided in previous replay. Also remove section with ID foto and all related CSS codes.

Add following code in cornerstone settings tab/custom CSS :

body {
    background: url(http://ellenproducties.nl/wp-content/uploads/2016/09/Ellen-S2-nr-042-bewerkt-2.jpg);
    background-position: top center;
    background-repeat: no-repeat;
}
.site {
    margin: 0 auto;
    background-color: transparent;
}

To apply this background globally, add it under Customize -> Custom -> CSS.

Hope it helps.

[mateoserendipia]

Hi,

Thanks again for the answer. This also only partially works: the photo is now beneath the content, but the image does not resize in width to smaller screens. I had tried this solution already weeks ago, but could not get it to work. I tried all kinds of variations of the background property (cover, contain, etc.), with no results.

I have now three test pages:

1
The home page:

Home

2
Jade’s solution:

Home

3
Christophers solution:
http://ellenproducties.nl/?page_id=243

Jades solution shows the image as should be (the width scales down on smaller screens), but content is under image instead of on top. If we can solve the z-index business that should do the trick.

Christophers solution has now the right layer order, but the image does not scale down.

The image should behave as the one shown on the first page (the home page) when viewed on smaller screens. The max-width of the site is 1200 px (set in the customizer). The pic itself is also 1200px wide, but it seems to get wider in Christophers solution.

I have given the image a temporary blue background to make it easier to see its dimensions.

Hope you can help!

Thanks!

[Joao]

Hi There,

Please update this code at Appereance > Customizer > Custom > CSS

From:

@media (max-width: 480px){
		.x-btn-navbar, .x-btn-navbar.collapsed {
    	font-size: 15px;
		}
  	.x-navbar .x-brand {
      font-size: 15px;
    }
  	.x-btn-navbar {
    	margin-top: 5px;
  	}
  	.x-navbar-inner {
  		min-height: 40px;
  		padding: 0 5%;
		}
}

To this:

@media (max-width: 480px){
		.x-btn-navbar, .x-btn-navbar.collapsed {
    	font-size: 15px;
		}
  	.x-navbar .x-brand {
      font-size: 15px;
    }
  	.x-btn-navbar {
    	margin-top: 5px;
  	}
  	.x-navbar-inner {
  		min-height: 40px;
  		padding: 0 5%;
		}
  
  body {
    background-size: contain !Important;
  
}
  
  .x-navbar {
    background: none !important;
  }
  .x-navbar .mobile .x-nav {
    background: rgba(255,255,255,0.8);
    padding: 20px;
}
}

Hope that helps,

Joao

[mateoserendipia]

Hi, thanks, this als works partially. It reduces the image on a mobile phone.

But i’m trying to get the image to behave as in in the home page (example 1) and in Jade’s example (example 2), so when resizing a window the image also resizes dynamically. In Joao’s solution the photo does not resize until it falls under a certain width.

I still feel that the Z-index of the elements in Jade’s approach should work – but I cannot figure out why it doesn’t.

Thanks!

[mateoserendipia]

Well, I took a shower and solved it in the meantime… Jade’s solution did almost work, but I realized it was missing something: for the z-index to work on an element the element needs to be assigned a position property (absolute, relative or fixed). The default is ‘auto’, and that doesn’t work with the z-index. Jade’s code was missing that statement. So I changed the last part from her code from

.page-id-211 .x-section {
    z-index: 1;
}

to

.page-id-211 .x-section {
    position: relative;
    z-index: 1;
}

Sometimes something simple can take quite some time…
Thanks all!

[Christian]

You’re welcome. Glad we could help. 🙂

[Author]

Posts