Navigation menu lost, images sized improperly with mobile view (Purple Haze theme)

[asnhayes]

Help, please. 

The website I've built for my classroom seems to fall apart in the mobile view. I switched to the Purple Haze theme, which is supposed to be mobile responsive, but the navigation menu disappears entirely, and the header images are a mess. The buttons run off the screen to the right. 

I've used Weebly for years with my class websites and never had an issue with mobile appearance. What's going on here? I don't want to redo all the work I've put into this site. I love how it looks on desktop. 

Thank you. 

Adrian 

http://hayesenglish.weebly.com

[Erin6]

Hi, @asnhayes!

May I ask what mobile device you are using? The navigation colapses to a hamburger navigation (3 lines), which you should see in the top left corner of the page on a mobile device. The header images look fine to me, although I do see what you mean about the buttons. Two buttons at the bottom of the home page do run off the page a bit for me. 

Will you go into your editor and center those buttons for me? Let's see if that makes any difference.

Thanks,

Erin

Weebly Community Manager

[bages]

I have a similar problem, since the picture fitting the desktop version is all wrong on phone and tablets.

www.houseofbellas.com

Any idea on how to make the picture fit?

Michael

[Adam7]

---

@bages wrote:

I have a similar problem, since the picture fitting the desktop version is all wrong on phone and tablets.

www.houseofbellas.com

Any idea on how to make the picture fit?

Michael

---

I see what you're describing on houseofbellas.dk, @bages.  In order to control the positioning of your background independent of your desktop site, you'd need to customize your theme to add some mobile-specific CSS rules.  You can do that by going to the Theme tab and clicking on Edit HTML / CSS.

[asnhayes]

Thank you, Erin. 

The buttons were centered on the page, but in two columns (left button justified to the right, right button justified to the left), so I went ahead and centered them in their columns. That didn't change how they appear on the mobile version. 

On my mobile device (iPhone), there is no menu at the top at all -- not even the collapsed menu/hamburger navigation. I checked it out on my husband's iPhone as well, and his looks the same as mine. 

In class, my students use the website almost exclusively on laptops, but from home, they primarily stick to their phones. So I need to have the site looking good and operating properly in both versions. Any other suggestions? I'm afraid I'm going to have to redo the work in another theme. 

Adrian

[asnhayes]

Also, I found a potential solution in the Weebly community that suggested editing the header code to be sure it included this:

<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>

And I tried that. I now have a very faint, vertical line on the top left (three dashes, see screenshot), and if I tap that, a navigation menu appears. But it's so faint it's almost invisible.

And even with that fix, the buttons still run off the page and the images don't resize properly. 

Tiny faint lines for the nav menu.

[asnhayes]

I ended up just changing the theme and redoing some elements. 😕

[Adam7]

---

@asnhayes wrote:

I ended up just changing the theme and redoing some elements. 😕

---

Sorry to hear that you had to do that, @asnhayes.  If you have any other questions or trouble please let us know.

[kdaffin]

Im having trouble with actually navigating from page to page? SOmething is judt not clicking for my website can you help me out and tell me what im doing wrong?

[Adam7]

---

@kdaffin wrote:

Im having trouble with actually navigating from page to page? SOmething is judt not clicking for my website can you help me out and tell me what im doing wrong?

---

What site are you having trouble with, @kdaffin? We can take a look.