Okay
  Public Ticket #1043259
Moble menu just for smartphones
Closed

Comments

  •  26
    Sira started the conversation

    Hi:

    I would like to know if it is possible for tablets that the menu shown is the "Main menu", leaving the "Mobile menu" just for smartphones.

    Thank you!

    Sira

  • [deleted] replied

    Hi Sira,

    It depends on screen size, usually tablets are bigger than 768 pixels, however you can set your desired breakpoint for mobile menu here:


    (view large version)


  •  26
    Sira replied

    Hi, Arlind:

    That's a new one! Thanks, I did'nt know this setting :-)

    Best

    Sira

  • [deleted] replied

    Hi Sira,

    You are right, we just introduced this feature on 2.0 update.

    Sometimes it's great to read release notes too haha. We try to add image links there too, so users can see how that feature looks and where it is located.

  •  26
    Sira replied

    Hi again:

    I ussually read the release notes, I promise! But it's true I missed the 2.0 new features, they are great!

    One other things (http://www.zac-dg.com/):

    1. I've update the theme and there is something that now it does not work:

    The hamburger menu has disappear on my smartphone, it is outside the screen and you can only see it if you move the page to the left. It seems like the logo it's to big and I had to set it to 180 px in mobile devices (branding settings) to get the hamburger menu shown...

    2. The menu now is on the top of the page, not vertical centered in the menu area as the search icon. And the menu area is thicker than before (when you scroll downs, as I have a sticky menu, the menu area gets less thick)

    Thank you!!!

    Sira

  • [deleted] replied

    Hi Sira,

    1. The logo width on mobile is applied when the page is opened directly from mobile device:

    http://drops.laborator.co/24Vf

    If you scale the window size it will not change the size, but if you refresh the page the size will be set based on initial viewport size.

    2. There was some custom CSS overriding header styles so after removing it and changing values in Sticky Header options now the sticky menu is thinner:


    (view large version)

    I hope you like it.

  •  26
    Sira replied

    Hi, Arlind:

    First of all, thanks :-)

    1. I always check the website on my smartphone, never resizing the page on my computer. I had to set the maximun size of the logo to 185px for mobile (see jpg attached logo.jpg). For an smartphone it's OK, but not for a tablet, where the logo looks to small, but I did't find another way to set it. 

    If I don't set the maximun size, see what happens in attachments smartphoneX.png and iPadX.png (X=1 when you open the page, X=2 when you scroll down)

    2. It works great in Chrome :-), but see what happens in IExplorer (see attachmets Iexplorer1.jpg when you open the page (the menu area is taller and the logo smaller if you compare it with Iexplorer2.jpg -scrall down-, the menu items are on the top of the page in both cases) 

    I've erased the logo widht in sticky menu so now it has always the same size.

    I have added here 4 attachments, I'll add the others replying again

    Thank you again and regards

    Sira

  •  26
    Sira replied

    And the other attachments... :-)

  • [deleted] replied

    Hi Sira,

    1. You can add this CSS to make the logo width 185px on screen sizes 768-1024 pixels:

    @media screen and (min-width:768px) and (max-width: 1024px) {
    .logo-image {
    width: 185px;
    }
    }

    This could work for you.

    2. I have added this CSS code and fixed the issue in IE:

    .header-search-input.menu-skin-main .search-icon a svg {
    height: 22px;
    }

    Result:


    (view large version)

  •  26
    Sira replied

    Hi, Arlind:

    1. I think that the logo does not resize at all depending the screen size, so the hamburger menu get lost (it does not fit) in a smartphone screen. Please see if there is a way to fix it (the way I found makes all the mobile devices show the logo with a 185px size, wich for a tablet it's too small). I added your CSS (thinking that later I could change the screen values to make it work just for small divices) but it does not make any changes,

    2. Great!

    3. I want to buy another license for a client. And I wannna the notification e-mails arrive to another email, not mine, is it possible or I have to make another Envato Accouint for that?

    Thanks and best

    Sira

  • [deleted] replied

    Hi Sira,

    1. Well, after adding this CSS:

    @media screen and (max-width: 480px) {
    .header-logo.logo-image {
    width: 185px;
    height: 50px;
    }
    }

    The logo will only be affected on mobile size and not in tablets. I hope this works for you?!


    3. Sure, that is not a problem, all you need it a purchase code for theme activation, so once you make a purchase, regardless the account, purchase code will be validated. No worries, if you stuck in the process, I will help you completing the activation.

    Wish you a great day and all the best for you.

  •  26
    Sira replied

    Hi, Arlind:

    1. It works right, thanks! The only thing is that in my smartphone the hamburger icon get lost when scroll down, only the logo is "sticky". Odd, isn't it? If you see it in your computer and resize the browser window it works just fine...

    2. I have bought a new license, everything seems alright. Regarding this new site, if you go to http://www.pacollinspe.com/?page_id=3283, the filters line is wider than the portfolio items area. It's happenign since I've updated...

    3. I have another client that wants a multilungual page. Does Kalium work well with qtranslate plugin? I guess all pages would have to be custom ones, even the portfolio ones?

    Have a nice day too and thanks!

    Sira

  • [deleted] replied

    Hi Sira,

    1. I have checked on my iPhone 6s but the hamburger icon in the menu is showing also in sticky menu:


    (view large version)

    Can you tell me how can I replicate this issue.


    2.  There are 2 alternatives to fix this, first is by removing non-breakable row by adding this CSS:

    ul.portfolio-root-categories {
    white-space: normal;
    }

    Or by reducing the spacing between links:

    .product-filter ul li {
        margin-left: 5px;
    }

    However the second alternative is not stable and could break on various viewport sizes.


    3. Yes, our latest version of Kalium is very multi-lingual friendly and supports qTranslate + WPML plugin. We gave priority to WPML because more people use it, but also qTranslate plugin works just fine with our theme.


    I hope this helps you and many thanks for supporting our work!

  •  26
    Sira replied

    Hi, Arlind:

    1. I've attached 4 images from my iPhone 6s, you can see that as I scaoll down the hamburger menu icon desappears, glad to hear that in yours works fine, I don't know how you can replicate it....

    2. Finally I added this:

    .product-filter ul li {
        margin-right: 10px;
        margin-left:0px;
    }

    ul.portfolio-root-categories {
    white-space: normal;
    }

    It works great!! Thank yoo :)

    3. Glad to hear that. Your theme is great and I know it well enough so it's a very good option ;-) Where can the language buttons be added? I guess that they will appear as a new widget, so just in the menu area (I think it does work just for top menu) or in the footer?

    Best

    Sira

  • [deleted] replied

    Hi Sira,

    1. I was checking about your site on mobile, after scrolling up and down it was the same, the hamburger icon didn't didn't disappear. Only when you zoom in the site, the icon disappears because it only fits on 100% viewport scale. 

    2. Thats great!

    3. Language buttons are usually placed in the main menu (as sub menus) but they can also be added to the footer with shortcode.

    Thanks for your kind words. Have a great week

  •  26
    Sira replied

    Hi, Arlind:

    Thank you, clearly on my iPhone it does not work right, misteries of devices...

    If I finally need to do a multilingual page and I have doubts I will let you know :-)

    Have a nice Monday (difficult thing to have!, very hard day!)

    Sira

  • [deleted] replied

    Hi Sira,

    Yeah, some devices act weird, we have had similar issues reported from users.

    Of course, if you need anything else let me know and I will help you.

    Hahaha, yeah mondays are like that, but we are trying to do our best we can!

    Thanks a lot for your patience and understanding.

  •  26
    Sira replied

    :-)

    Best,

    Sira