Subgrid - z index - Post ID 275303

Jul 31st, 2017 at 05:00 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Hello Forum
Was wondering if its possible to apply a z index to a sub grid. Was wanting to put a partially transparent fill on top of a picture and place elements or type in that subgrid row. I placed a pic in the column and then a subgrid and used neg margins to move it but it goes behind the picture. Same with a container.

I bounce back and forth from Bootstrap to Foundation but its seems Foundation can do a bit more - not that I understand it! But in Foundation for now.

Thanks
Byorn
Jul 31st, 2017 at 05:13 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Ok figured that out but its not the effect I was hoping - trying to do this

https://www.self-storagehouston.com/

You see how the top phone area and nav look like they are over the picture over a partial opacity screen? It stays at the top though all the break points except when on small screen it goes to a mobile navigation. That is what I am looking for

Thanks!
Byron

(if someone is curious about the above post - I changed the position from static to relative and the z index became available)
Jul 31st, 2017 at 05:32 PM
User 122279 Photo

Inger
Senior Advisor
14,649 posts
Online Now

I don't quite understand what you are trying to achieve. A sticky navigation? A navigation that becomes sticky on scroll? A fixed background image at the top? Something else?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 31st, 2017 at 06:15 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Not sure if its a sticky navigation but like the site I posted - the client likes how the top row for the phone and the row for the nav are over the over picture. But when I do it I cant make the subgrid (with the opacity bkg) stay at the top of the picture at all times till the very smallest breakpoint when it changes to a more traditional mobile navigation.

Hope that makes sense

Byron
Jul 31st, 2017 at 07:13 PM
User 122279 Photo

Inger
Senior Advisor
14,649 posts
Online Now

OK, a bit clearer now. I wouldn't use a subgrid. Just make the image the background of the row, image size: cover;, then a column holding the phone number, and a new column for the navigation. Those two columns can have semi-transparent backgrounds.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 31st, 2017 at 09:13 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Yes - tried that before - wondered if there was a better way

Thanks!

Byron
Jul 31st, 2017 at 09:18 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Is there a way to make the row height auto and show the complete photo?

Byron
Jul 31st, 2017 at 11:29 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,397 posts

Byron Tipping wrote:
Is there a way to make the row height auto and show the complete photo?

Byron


Not if you are using the image as a background (well you can but it wont be the height of the photo because it is a background image. you have to either set the height in vh or in pixels the same height as the photo
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Aug 5th, 2017 at 06:23 PM
User 458539 Photo

Byron Tipping
Registered User
1,647 posts

Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.