Lambada – wrong indenting mobile menu and gallery view problems

[Vincent Sijben]

Hi there,

Thanks again for a great theme! I’ve got 5 questions:

1. Mobile menu
I’ve noticed these CSS lines which cause a skew in all submenu items:
ul#menu > li > ul.sub-menu
{
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
transform: skew(5deg);
}
which in my case would be wrong. I don’t know why anyone would want that skew, but it’s probably a stylish thing I don’t get 🙂
My navigation is build this way:

item
– subitem
– – subsubitem
– – subsubitem
– – subsubitem
– subitem

But that last subitem, due to the skewing, is placed as if it were the last subsubitem.

Could you provide us with the CSS code to undo this skewing in a child theme, and to properly indent subitems and subsubitems?

2. On my Iphone 5 and on a Samsung Galaxy S5 most items on mobile pages are sticking to the edge of the screen. I would like to have 2 or 3 pixels padding from the edge.
Could you provide us with the correct code to take care of this in a child theme?

3. Opening a gallery on my iphone requires 2 touches. Maybe this is a WordPress thing, but it’s really annoying. On the Samsung, I can touch an image, and the gallery pops up immediately. On the iphone, when first touching an image, it says eg. “gallery(3)” and I need to touch it again to open.

4. When viewing a gallery with a lot of images on a smaller screen, the thumbnails won’t fit anymore due to the width of the screen, they move beneath the first row of thumbnails and are almost not clickable anymore (offscreen). A WordPress thing?

5. When viewing a gallery on smartphone, if there are too many thumbnails to draw in 1 row, I can’t access the other images anymore. I can’t swipe, there’s no arrow for next images and I can’t see all thumbnails. Is this again a WordPress thingy?

[Vincent Sijben]

I was too late with editing. Another question…

6. When I permanently delete /contact/ from my WordPress installation and create a brand new page /contact/ with the default template (not the contact template), it shows the contactform as well. Is that a bug? I don’t want the form from the theme, I use a plugin for my forms. Is it always injected when you have a page which URL is /contact/ ?

[7Theme Support]

Hi Vincent,

Question 1:

You are right, sorry for this. Please go to WP Admin -> Appearance -> Theme Options -> General -> Extra CSS Content and add this:

div.mean-bar ul.sub-menu {
-webkit-transform: skew(0deg) !important;
-moz-transform: skew(0deg) !important;
-o-transform: skew(0deg) !important;
transform: skew(0deg) !important;
}

This will solve the problem.

Question #2:

You can add this code to the Extra CSS Code (see above):

#container {width:94%; margin:0px 3%;}

This should solve also this problem 🙂

Question #3:

I will test it and wrote another post as soon I we found a solution

Question #4:

No, I dont think its a WordPress think, its more a problem with the jQuery plugin we’ve used for the gallery. You mean the lightbox right?

Question #5:

Same thing as question #4. How many images do you have in the gallery? Then we can “rebuilt” the problem and try to find a solution.

Question #6:

Thats a WordPress problem! But easy to solve, just delete the file “contact.php” in the root theme folder, than all is working without any problem.

[Vincent Sijben]

Hi webadmin 🙂

Thanks for the fast reply. Here are my comments.

1. works like a charm, but could you add the second part of my question as well? The subsubitems need to indent too (double the indent of subitem).

2. this piece of code works too, but needs a bit extra css I guess.
2a. It should be only for mobile
2b. I have (like the demo) some custom sections with backgrounds. Now the text in that section is to the edge of that section (and a little off, from the edge of the screen). maybe div.custom_section needs some padding too?

3. OK, but isn’t this a WordPress or jQuery thingy too?

4. yes I mean the lightbox. Take this page for instance http://web-rockstars.com/lambada/?page_id=2074 and make your browser like 500 or 600 pixels wide. Then you’ll see what I mean.

5. See 4 🙂

6. That will work, do you perhaps have a solution for child theme? I don’t want to have any custom things to do when updating your theme. Maybe add a contact.php in the child theme and copy over all code from page.php or something like that (but that’s not non-destructive too, ones you enhace the default template 🙂 )

[7Theme Support]

Hi,

#1

Sorry, dont saw the second part. Sorry for the issue with the sub sub items, dont saw this while testing. Here is the working code for your stylesheet file:

.mean-bar ul.sub-menu, .mean-bar ul.sub-menu > li > a {
  -webkit-transform: skew(0deg) !important;
  -moz-transform: skew(0deg) !important;
  -o-transform: skew(0deg) !important;
  transform: skew(0deg) !important;
}
.mean-container .mean-nav ul li li li a {
 width:100%;
}

#2a

Yes, you are right 🙂

Here is a better solution, please remove the code “#container…” from our last post again.

@media only screen and (max-width: 479px)  {
 .mainsection .inner {
  width: 94% !important;
  margin-left: 3%;
  margin-right: 3%;
}
}

#3

Yes, it is, but maybe we can find a solution…

#4 + #5

Yes, now I know what you mean. The only thing we can do is do give you a css code to remove the images and replace it with dots do navigate the gallery. What do you think?

[Vincent Sijben]

Hi,

1. The subsubitem isn’t indented this way. It’s on the same horizontal level as subitem.

2. Works like a charm, thanks!

3. Hope you find a solution 🙂

4+5. That could be a temporary fix, yes. Though I hope this bug will be fixed soon with full thumbnail support. Maybe that’s due to the jQuery plugin…

[7Theme Support]

Hi,

1. Not sure if I understood you, the sub menu items should be on the same horizontal level or not?

4+5 For a temporary solution you can add this to ‘extra css content’ :

@media only screen and (max-width: 479px) {

.tos-wrapper.tos-has-thumbnails .tos-pagination a {
width: 15px;
height: 15px;
border-radius: 100%;
background: #FFF !important;
}

}

[Vincent Sijben]

Hi,

4+5 is ok for now, thanks!

1. The mobile menu now looks like:

– item
– – subitem
– – subsubitem
– – subsubitem
– – subitem

It should be indented correctly like:

– item
– – subitem
– – – subsubitem
– – – subsubitem
– – subitem

[7Theme Support]

Hi,

this problem we are currently fixing for this theme. You can download it later in your account, new version will be 2.01

[Author]

Posts