Mobile view footer and submenu problem

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 19 replies, 3 voices, and was last updated 7 years by David Martin – Support.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Back to forum

Posted in: Neighborhood
January 5, 2017 at 11:02 am #308928

sittingprettyclothing
Member

Post count: 123

Good day

I have some mobile view problems:

1) The footer menu seems to be all scrunched up on the left, as a result its a long string of short words. I just want to fix this on mobile view only. Screenshot 1

2)The submenu does not want to collapse, after it has been expanded. I saw a few threads about this issue but I can’t seem to find anything that it has been resolved?

Attachments:
You must be logged in to view attached files.

January 5, 2017 at 12:30 pm #308951

David Martin – Support
Moderator

Post count: 20834

1) This is caused by your custom CSS:

Guessing you added that for desktop without looking into the mobile consequence?

2) What submenu do you refer to?

January 5, 2017 at 2:24 pm #308975

sittingprettyclothing
Member

Post count: 123

1) Is it possible to add css just for the mobile view?

2) Not any of the submenu’s can collapse again after you’ve clicked on the arrow in the mobile view to open them, they just stay open.

January 6, 2017 at 12:00 pm #309089
David Martin – Support
Moderator

Post count: 20834
1) You would use media queries: http://stephen.io/mediaqueries/
```
@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(1),
 #footer-widgets .span3:nth-of-type(2), 
#footer-widgets .span3:nth-of-type(3) {
    max-width: 100%;
}
}
```
2) Your mobile menu parent item link URLs need to be # rather than an actual link address if you want them to collapse.
January 6, 2017 at 2:02 pm #309121

sittingprettyclothing
Member

Post count: 123

1) And to center the main headings? I managed to center the menu items but not the main heading. See screenshot 2.

2) What if there the menu item is a page and not a link? Where would i put the “#’? Or am I entering it into the wrong place? Is there a specific place I need to change the mobile menu?

Sorry I struggled to understand this sentence in the forum too, not sure if I understand it correctly.

Many Thanks David 🙂

Attachments:
You must be logged in to view attached files.

January 6, 2017 at 2:25 pm #309131
David Martin – Support
Moderator

Post count: 20834
1) You would modify the code to include the CSS text align property: ref: http://www.w3schools.com/cssref/pr_text_text-align.asp
```
@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(1),
 #footer-widgets .span3:nth-of-type(2), 
#footer-widgets .span3:nth-of-type(3) {
    max-width: 100%;
}
#footer h4 {
    text-align: center!important;
}
}
```
2) On the mobile menu, you insert a custom link.
January 9, 2017 at 9:05 am #309237

sittingprettyclothing
Member

Post count: 123

How would I get to the mobile menu?
Cant seem to find it?

I need the Shop menu entry to be a page so the customer can click on the ‘Shop’ entry and then get redirected to the shop page, so I don’t think a # would work in this menu.

PLease advise

January 9, 2017 at 9:16 am #309239

sittingprettyclothing
Member

Post count: 123

Can’t seem to edit my previous post.
The social icons are not aligned, any ideas?

Attachments:
You must be logged in to view attached files.

January 9, 2017 at 10:10 pm #309369
Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779
you need to remove this custom css.
```
#footer-widgets .span3:nth-of-type(4) {
    padding-left: 16.6665%;
}
```
and add this one:
```
#footer-widgets .span3:nth-of-type(4) h2 {
    text-align: center;
}
```
-Rui
January 10, 2017 at 2:32 pm #309472

sittingprettyclothing
Member

Post count: 123

Hi Rui

If I remove and replace the css you provided it changes it on my website also. I just want the media only screen to change.

Also need an answer on the previous post, just above the one you answered.

Thanks!

January 10, 2017 at 2:37 pm #309482
David Martin – Support
Moderator

Post count: 20834
As above, just put that in the media query.
```
@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(4) h2 {
    text-align: center;
    padding-left: 0;
}
}
```
January 12, 2017 at 9:20 am #309820

sittingprettyclothing
Member

Post count: 123

Hi David

I tried that, but it doesn’t seem to work.

Thanks

January 12, 2017 at 10:59 am #309836

David Martin – Support
Moderator

Post count: 20834

You had a media query above that was missing a closing bracket.

}

Thanks.

January 12, 2017 at 12:10 pm #309859

sittingprettyclothing
Member

Post count: 123

Hmm, I don’t see it?
Please advise.

Thanks

January 12, 2017 at 12:15 pm #309860

David Martin – Support
Moderator

Post count: 20834

Yeah I fixed it, adding it back for you.
Back to forum

Posted in: Neighborhood