Force horizontal menus on mobile (or HTML Contact form link)

SmugSam

Hi there,

I am trying to get my Contact form working on Mobile devices.

- If I use a Menu block with a link to the Contact form, the link works on mobile but the menu items get forced to vertical and take over the page (I have two menu items side by side, and I would like to keep them small and at the bottom of the page, in the footer).

- If I create a custom menu using HTML, I can make it look the way I want on mobile, but I cannot find a way to link to the Contact form in HTML (using '#' does nothing).

So - I can have a Contact link that works, or a menu that looks the way I would like. Any ideas how I may be able to have both??

Thanks in advance for any input!

Sam

SmugSam

No thoughts anyone? I have searched all over, and see others are having similar problems, but I haven't come across any answers? I can't believe the ONLY way to get the SM contact form working on mobile/smartphones is to use the Menu block, or that the Menu block HAS to display vertically on these devices?

phaserbeam

SmugSam wrote: »

I can't believe the ONLY way to get the SM contact form working on mobile/smartphones is to use the Menu block...

I'm not sure if i understand your problem, but yes, the only way to use the SM contact form is to use the menu, but you can use a WUFOO form...

Have you tried to add another menu with COLLAPSE_FOR_MOBILE=OFF with only the contact link? As i said, not sure if i understand your problem...

SmugSam

phaserbeam wrote: »

I'm not sure if i understand your problem, but yes, the only way to use the SM contact form is to use the menu, but you can use a WUFOO form...

Have you tried to add another menu with COLLAPSE_FOR_MOBILE=OFF with only the contact link? As i said, not sure if i understand your problem...

Thanks for the response Phaserbeam! Let me see if I can explain better:

The problem is that any Menu blocks, when viewed on smaller screens such as iPhone, just get moved all together and their links set to display vertically, no matter how you set them in your design. If you look on my page, at the bottom of the left-hand nav bar I have some social links and a Menu block with 'About' and 'Contact' horizontally beside each other. I just want to replicate that on Mobile devices. But a standard Menu block switches the links to vertical when viewed on smaller screens, taking up a ton of real estate.

To get around this I switched to using a separate footer, hidden for bigger screens but visible on smaller screens. I can build a menu in HTML that looks the way I want (the two links beside each other horizontally) but I don't know how to 'link' to the Contact form via HTML. I have tried using '#' that some people here had talked about, but it doesn't seem to do anything.

I have even tried putting two separate Menu blocks, with one link each, on the page and aligning them side by side, but again on mobile devices this is overridden and the links are again stacked vertically (and large) taking up half the screen.

I hope that makes more sense? I just want a way to build my "Contacts area" as it shows on a big screen, as a footer for small screens. Doesn't seem that it should be so hard...

Thanks for your thoughts on this - I appreciate it.

phaserbeam

SmugSam wrote: »

I hope that makes more sense? I just want a way to build my "Contacts area" as it shows on a big screen, as a footer for small screens. Doesn't seem that it should be so hard...

Well... i tried to make my browser window smaller so it has the size of a mobile device and i even tried to load your page on my smartphone... i always see About and Contact aligned horizontally except i make my browser window really really small...

caroline

Use http://quirktools.com/screenfly to check how your site looks on other devices for starters

I'm confused by your home page, there doesn't appear to be much in the way of navigation, maybe you are working on this right now but all I see is 'Collection'?

Not sure what the problem is with the link to the contact form, are you sure it is correctly set up?

Caroline

SmugSam

phaserbeam wrote: »

Well... i tried to make my browser window smaller so it has the size of a mobile device and i even tried to load your page on my smartphone... i always see About and Contact aligned horizontally except i make my browser window really really small...

Phaserbeam - yeah that's the HTML menu I built - so the one that looks right, but doesn't work (the Contact link does nothing) If there was a way to link to the Contact form via HTML this would fix things very easily. As per above - I can either have a menu that works but looks terrible (using a Menu block) or I can build an HTML menu that looks right, but doesn't work properly. This is my current dilemma.

To summarise, I would be happy if I could either:

• Force a Menu block that I set to horizontal to actually stay horizontal on smaller screens; or
• Find a way to link to the SM Contact form using HTML, so I could continue to use the menu that is currently displaying.

caroline wrote: »

Use http://quirktools.com/screenfly to check how your site looks on other devices for starters

I'm confused by your home page, there doesn't appear to be much in the way of navigation, maybe you are working on this right now but all I see is 'Collection'?

Not sure what the problem is with the link to the contact form, are you sure it is correctly set up?

Caroline

Hi Caroline! Thanks - I already am using Screenfly. The issue is not that I can't test the screen layout - it is an actual problem on small screens, as verified when I test via Screenfly and/or on my iPhone. Hopefully my response to Phaserbeam above helps clarify the issue I have?

And thanks for the feedback on the site - it is early days, and so far yes I only have the one gallery (Collection) set up. Maybe pushing the 'minimal' concept a bit far, huh?

Appreciate you guys having input on this!

Sam

Allen

SmugSam wrote: »

Phaserbeam - yeah that's the HTML menu I built - so the one that looks right, but doesn't work (the Contact link does nothing) If there was a way to link to the Contact form via HTML this would fix things very easily. As per above - I can either have a menu that works but looks terrible (using a Menu block) or I can build an HTML menu that looks right, but doesn't work properly. This is my current dilemma.

To summarise, I would be happy if I could either:

• Force a Menu block that I set to horizontal to actually stay horizontal on smaller screens; or
• Find a way to link to the SM Contact form using HTML, so I could continue to use the menu that is currently displaying.

Hi Caroline! Thanks - I already am using Screenfly. The issue is not that I can't test the screen layout - it is an actual problem on small screens, as verified when I test via Screenfly and/or on my iPhone. Hopefully my response to Phaserbeam above helps clarify the issue I have?

And thanks for the feedback on the site - it is early days, and so far yes I only have the one gallery (Collection) set up. Maybe pushing the 'minimal' concept a bit far, huh?

Appreciate you guys having input on this!

Sam

I just added a menu to the bottom with two links and used this CSS to keep then on one line.
Browse Contact Me
Check the bottom of my site.

.sm-page-widget-5276013 
.sm-page-widget-nav-toplink {
   display:inline;
   padding:0 7px;
}

@media only screen and (min-width: 480px) {
  .sm-page-widget-5276013 {
      display: none;}
}

Shot from Screenfly for iPhone

Allen

The only problem I see is the contact form is too wide on my iPhone and all other phones.
http://www.dgrin.com/showthread.php?p=1943894#post1943894

SmugSam

Allen wrote: »

I just added a menu to the bottom with two links and used this CSS to keep then on one line.
Browse Contact Me
Check the bottom of my site.

.sm-page-widget-5276013 
.sm-page-widget-nav-toplink {
   display:inline;
   padding:0 7px;
}

@media only screen and (min-width: 480px) {
  .sm-page-widget-5276013 {
      display: none;}
}

Shot from Screenfly for iPhone

Allen this looks like it just may be what i am looking for! I will give it a go and then report back. Thank you!

And yes...I know the Contact form does not scale to look particularly attractive/useful on small screens...but I don't really want to have to reach out to another service (Wufoo) for just s imple form, when there is one 'built in'.

Allen

SmugSam wrote: »

Allen this looks like it just may be what i am looking for! I will give it a go and then report back. Thank you!

And yes...I know the Contact form does not scale to look particularly attractive/useful on small screens...but I don't really want to have to reach out to another service (Wufoo) for just s imple form, when there is one 'built in'.

After you add the menu widget you will have to look in your page source for the new widget number and
put into this.
.sm-page-widget-5276013

Looks like this is yours.
.sm-page-widget-5175063

SmugSam

Allen wrote: »

After you add the menu widget you will have to look in your page source for the new widget number and
put into this.
.sm-page-widget-5276013

Looks like this is yours.
.sm-page-widget-5175063

Allen. You. Are. A LEGEND!!

Thank you that fixed my problem perfectly! Thank you so much. I knew there had to be a way, just not one I could figure out. I really appreciate your assistance on this.

(PS: I knew enough about CSS to know that I would have to change the reference for the specific widget on my page, but thank you!)

leftquark

One thing I do is have different navbars that are shown or hidden based on the screensize. If the screen isn't wide enough I go with a horizontal menubar at the top of the page. If the screen is wide enough, I hide that top horizontal menubar and use a vertical one on the left. More discussion here:
http://www.aaronmphotography.com/Customizations/Navbar/Display-Different-Navbar-Based

Allen

I hide my horizontal nav with drops on small screens a only show an html box with simple nav links.

SmugSam

leftquark wrote: »

One thing I do is have different navbars that are shown or hidden based on the screensize. If the screen isn't wide enough I go with a horizontal menubar at the top of the page. If the screen is wide enough, I hide that top horizontal menubar and use a vertical one on the left. More discussion here:
http://www.aaronmphotography.com/Customizations/Navbar/Display-Different-Navbar-Based

Thanks Aaron. I 'borrowed' your approach above already on my site. (I actually borrowed a number of things from your tutorials - I mentioned a thanks to you when I first 'announced' my site in this forum, but in case you never saw that - thank you SO much! Very useful.)

The issue here was not one to do with offering different menus. It is an issue that Menu blocks from the customiser, when viewed on a small screen, get forced vertical. No matter what you set them to. (They also seem to ignore your choice of capitilisation, and size, and placement, and margins...).

So Allen solved that problem for me.

Now, if only the Contact form would display better on small screens (right now it just runs off the screen) that would be good. I think I saw that someone posted this in either Bugs or Feature Requests already, so assume it is on a list somewhere.

Sam

Allen

SmugSam wrote: »

...
Now, if only the Contact form would display better on small screens (right now it just runs off the screen) that would be good. I think I saw that someone posted this in either Bugs or Feature Requests already, so assume it is on a list somewhere.

Sam

http://www.dgrin.com/showthread.php?t=245630

SmugSam

Allen wrote: »

http://www.dgrin.com/showthread.php?t=245630

Just added my vote to that.

Not sure of you have one more answer in you Allen?

I got that footer menu working great now thanks to your tip, but the footer region takes up an awful lot of real estate (see pic below). I have tried a number of things to shrink it - setting padding/margins to 0 for sm.page.layout.region.footer, doing the same for the individual elements within the footer, etc. Nothing seems to work. These changes work on large screen sizes (if I make the footer visible there) - but nothing seems to get it to budge on small screens. Don't suppose you would have any thoughts on what I could try??

ScreenShot.jpg