A few issues nav bar and cover image

  1. The scroll nav bar isn’t showing up in preview mode on web, tablet or mobile

  2. I want to change the size of the cover image on the tablet version and can’t seem to figure out how.

  3. The cover image is not showing up at all when I preview it on my phone

Thanks for your help!

Can you please share a read only link. Thanks! :wink:

https://preview.webflow.com/preview/libbymoore?preview=6b51e1d3ec8cdddb7210ae31737e5b95

Give the slider some height instead of “auto”

Could you please, be more specific? What do you call “cover image”?

Cheers,
Anna

1 Like

How much height? It was showing up before, then I edited the text and now it isn’t showing up.

The cover image - meaning the wood desk collage image.

Height meaning not the auto function but give it a px value. You should decide how much. Hope this helps. :wink:

About cover image.

This image is set as a background image for the slide. At the same time, this slide is set to height: auto and all parents of this element have height set to "auto. So, when browser tries to calculate the height of slider (to show you “cover image”), it end up with “0 px”, because there is nothing set to “keep the shape”.

About Scroll navigation.

I wasn’t able to find the element, which is triggering interaction for showing the scroll nav. Could you, please, point me, which element it is?

Regards,
Anna

Hmmmm… I did. 120 px. Still not showing up when I scroll.

What element should trigger the animation for scrolling?

I’m sorry. This conversation is so far over my head. I have no business designing this site but now I’m stuck finishing it. Everything was working fine, like the template settings. I was just trying to fill in the boxes and not change how anything worked. But I messed something up. Now the image is not showing up in tablet/mobile mode and the scroll nav never shows up.

Ok, @MichelleB :slight_smile: Lets do not panic.
We will guide you step-by-step and yo will finish your site. :slight_smile:

Now, could you tell me what template you used?

Bless you. It is Nexus.

Thank you so much. Also, Why does this board make me wait 6 mins to reply. Any way to work around that?

Well, now I can see where is the reason of the problem :slightly_smiling:

Initially, the template had the container inside the slide, which initiated animation for the Scroll nav appear


So it was like this: when Container goes out of screen view, then Scroll nav appear.

When you start to adjust the template for yourself, you removed that container with text and so animation initiator does not exist, which means that Scroll nav do not appear anymore.

For fixing it, will be enough to connect any other element on your site to the animation “Show nav”. I think slide or slider itself will be good enough (Slider moves out of the screen and Scroll nav will appear). So you just click on the slide (or pic whole slider element), go to “Objects” tab on the right side panel (with little cube icon) and click on the “Show nav” interaction.

Then, I noticed that on the template, they “turned off” the Scroll nav on the tablet and phone views. So if you will want to have that scroll nav, click on the Scroll nav element, then go to settings panel and click on the screen type, where you want to use Scroll nav.


Now about “cover image”

Here is again, it was that container, which has been creating the height of the slider (200 px of padding at the top and bottom).

Since now, you do not have this container, you will have to set height of slider element, or at least height of slide inside the slider. What this height should be is your decision: 500 px or 100%, or 200 px, whatever. Just do not forget to adjust it for every view: tablet, mobile-landscape, mobile-portrait.

Hope it helps.

Regards,
Anna

1 Like

Hi!

Ok. Thank you so much. Progress made. The scroll nav appears on the desktop version, but still not on the others.

I’m having a hard time understanding your directions on the “cover image.” I tried to adjust the height but it didn’t seem to make a difference at 100%, auto, or 1,000 px. All the same.

Also, the image of the woman - she looks centered on the desktop and the mobile portrait versions, but is cut off on the tablet & mobile landscape versions. Is it possible to adjust her in these two instances?

About scroll nav on tablet and other views I pointed in my post above

Cover image.

First, set the height to the slider, then go to slide background image settings (where you changed the image first) and change background settings to height:100% or width: 100%.

But honestly, the easiest way would be dragging and dropping actual image inside the slide (not set the background). It would keep slider always fit image ratio and you don’t have to set any height.

About image with the woman, you can center her by dragging arrows inside the background settings pop-up window:

1 Like

Sweet.

I dragged and dropped the cover image and it’s fixed.

With the image of her, Adjusting the arrows wouldn’t work. But I just “unfixed” the photo with the check at the bottom and it fixed it across mobile & tablet.

I did what you said earlier with the scroll nav on mobile and tablet yet I still am not seeing it when I scroll. Have any ideas?

Thank you so much for your assistance!

Hey, I turned on the scroll nav in the tablet and phone views, but it is still not showing up. Any ideas?

It is working to me :confused:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.