Streaming live at 10am (PST)

Menu & Slider Not Functioning in Mobile View


#1

In the designer mode my mobile menu opens just fine, is the length of the page.
Shot 1 is closed, Shot 4 is when opened

In Preview the nav menu button doesn't appear to work at all.
shot 2, when clicked ti just goes green

In Reality when viewed from a mobile phone the menu drops down but is tansparen and is on top of some content but behind others and is a mess.

All of the slider content is either cut off in some way or donsn't show half/some of the slider.
Shot 3

How can I fix the mobile menu/view?
How can I style the slider to appear properly in mobile view?

Thanks!
Shots attached





Here is my public share link: LINK
(how to access public share link)

https://preview.webflow.com/preview/urofem?preview=dc5c64d3c03735e9c67bb3a5d5d4b238


#2

Hello Tearai
Awesome site! I can see your problems.
Here are the solutions

But before we start, never have body as a parent to a slider. It confuses the slider arrows.
Okay lets begin
IMPORTANT! Do all these changes in desktop view, so they can cascade down, if not stated otherwise.
Your first and third problem can be fixed by doing these steps.
Step one
Inside of header section. change Margin top to 0. If you still want the same effect, give padding top 60 px instead. (Don't use margin that much on section elements. It shows the body behind it.)

Step two
Go into tablet view now. Click on your nav menu icon and open the menu. Go to your Nav Bar class and change the Position to Absolute top. Now go to your Nav Menu class and also set its Position to Relative. ( Not the same design, but I couldn't find any solution to fix it ), also change background color to white

If these steps aren't making a result, it is probably because of your slider:
Your problem with the slider can easily be changed by placing it inside a section, but for some reason it wouldn't let me. Try getting it in a section (most preferably header section)

EDIT: If you can't get the slider into a section, then just make it from scratch. :smiley:
David


#3

Hi there I am still struggling to get this to function - webflow will not allow the slider to be placed within anything?


#4

Yeah, I couldn't either. The only thing I can tell you to do is recreate the slider inside of a section. When done it shouldn't be a problem anymore :smiley:

David


#5

Hi @tearaibiofarma, from what I can tell, there is a section being used inside of the slider, on slide 5:

This is the reason it is not possible to drag the slider, into another section. I would only use sections under the body element, and divs and other elements (including sliders) inside of sections.

Try changing slide 5 to not use a section, and then it should be able to move the slider into another section.

I hope this helps!


#6

Nice find! Didn't see that. I was also wondering why it said, section can not be nested inside a section, when I tried to drag the slider in. :smiley:

@cyberdave why do they let you put a section inside of a slider?


#7

I have changed the section our for a DIv block that has allowed me to move the slider inside a section. Thank you!

But I have made all recommended changes and the mobile site is now even less functional.

I am completely stuck now and the site is useless in any version of mobile view, please help.

Even in preview mode I cannot get the drop down menu to work with any combination of postitions so I am unable to know if I am even making progress.

Thanks everyone who is helping!


#8

Hey again!
Try these changes:

Slider
Throw you homepage slider inside of your header section, but under the title
Give your homepage slider a position of Relative or else your slider arrows will try to position it selves to the body

Your Navbar is for some reason not working, I'll look into that, when I have more time.


#9

I have lost the entire functionality of the mobile website - after following everyones advice about how to position items I am further away from a result, please help.

1: my nav bar and menu do not work at all and my slider is cropped so that every slide is only partially seen.
How can I fix these?

Thanks,

Matt


#10

Hey Matt (@tearaibiofarma)

I create screencast for you with fixing the mobile nav issues.
https://drive.google.com/file/d/0B-7cg8BSq1Z_czhVVThCZExwOTA/view

It looks like the main problem is that navbar was inside the div... plus few more things, mostly absolute/relative positions and overflow settings.

Regards,
Anna


#11

Hey @tearaibiofarma taking a look now, be sure to watch @sabanna video above :slightly_smiling: :

(1) Change navbar to overflow-visible:

(2) Remove hover state on touch screen devices (there's no hover on touch screens) so on the Nav Links change the bottom padding on Hover state to 18px and change the top margin to 10px instead of 60px:

(3) Set the styles back to default for the Nav Menu (padding and margin styles are fine to use), to remove styles, click on the blue styes and click "remove styles"

(4) Change Top Section to a z-index of 10:

(5) Publish the site and test the menu on the published site

Please let me know if this helps and tag me @Waldo when you've tried the above steps.


#12

Thank you very much @sabanna! As a rule is it good to remove all style settings if there is porblems?

You are awesome!


#13

Hi @Davidlin_ch12, well that is a good question. The slider itself is a div, and it is not restricted to put a section within the DIV. It is good practice though to keep sections under the body, then put other content within the section.


#14

You are welcome, @tearaibiofarma.
I always use this "method" if I got some problems with layout structure. Some elements have default Webflow style settings and most of the time that settings made for a reason.


#15

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