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. David
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.
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.
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?
(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”
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.
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.
:
