Header on mobile, and arrow to scroll

Support
#1

Hello,

I’ve just launched my new site, built on Pro. I should preface this thread with the fact I am not a web developer, don’t know code, and it is actually some sort of miracle that I have made it this far without needing any help.

I need two things, maybe three, for my site to be functional. I need it to look good on a mobile device. seems most of it does, but the header I have built doesnt seem to format well on a smaller device. i assumed everything I built in the fancy new Pro header builder, would translate, but it doesn’t seem to.

The other thing I’d like, is an arrow in the middle of the header at the bottom, so that people know to scroll down, and that it will scroll to content. I tried messing around with anchors, but alas, have hit the wall of my abilities.

astly, i tried adding a menu item with sub-items in it on the header, and the menu seemed to open up behind the header, which makes the items impossible to get to. I took it off for now, but if this is just an easy glitch to fix, let me know!

Thanks for you help. my site is www.dallasnye.ca in case you need it.

#2

Hey there,

It is not mobile friendly because you’re using huge margins for your text Acupuncture and Hypnotherapy treatment for physical and emotional pain.. Margins and paddings do not change so it will not automatically position your content on mobile. I recommend you setup a separate bar below for this text so you won’t have to use margins.

For the arrow link, you can use a Button element for this as you can turn off the text and choose an arrow icon.

To make it scroll to the content or section, assign an ID for your section and in the URL field, insert # followed by the ID.

For the sub-menu issue, it sounds like a z-index setup issue. Check your bar’s z-index number. To understand how z-index works, please see this article.

I would also strongly recommend that you get familiar with the builders’ elements first before building to know the proper way to achieve your design. Please see the tutorials in our Knowledge Base.

Thanks.

#3

Thanks for the reply. Since your message, I have been playing around with the ability to hide certain elements on the header on certain screen sizes, and this seems to be working for me.

I took your advice, and made another bar, and put the content in there. Now the background doesn’t match bar 1 and 2 on the header. How do I make this happen; have the Background image span 3 bars, not just one?

I have read through the articles you gave me, and the Z-axis was helpful, though I think the images in the article are incorrect. I got the point, regardless.

#4

The button idea for the scrolling arrow isn’t really what I was looking for, either. I wanted something like in the demo site http://demo.theme.co/integrity-1/

hoping this may be possible.

#5

Hi There,

I did check your setup and I am confuse with the header because of wrong html structure. There’s so many excess <i> tag. Please make sure that when adding tag, it should be in pairs like <i></i>. Since I cannot see the issue at the moment, please check missing or extra tag and then on your reply do give a screen showing the difference.

Yes, it is a button element but we need to build it to achieve that look. See this sample: https://screencast-o-matic.com/watch/cb6u1J2c1n

Hope this helps.

#6

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