Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 27, 2016 at 4:31 pm #639369
    Sunique

    Hi,

    For some reason my content is moving some pixels to the right and then back to left again when I click the mobile menu.
    What’s wrong with my CSS?

    Use the link that I provided in the private content field.

    Thanks!

    //J

    May 27, 2016 at 9:29 pm #639521
    Jordan

    Hey Jimmy,

    Thanks for getting in touch with us!

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • the URL to the login screen
    • a valid username (with full administration capabilities)
    • as well as a password for that username.

    Best regards,
    Jordan

    June 1, 2016 at 4:19 pm #641585
    Sunique

    Hey!

    See attached information!

    June 1, 2016 at 4:39 pm #641600
    Sunique

    See message

    June 1, 2016 at 9:00 pm #641721
    Basilis

    Hi!

    The emulator seems to making the issue.
    The problem is not on the actual CSS, as I can notice.
    I loaded your web site and it seems to be loading right…

    Can u ask user for maybe a screenshot, please?

    Cheers!
    Basilis

    June 2, 2016 at 10:07 am #641926
    Sunique

    Well that’s not it… The emulator actually worked fine yesterday, but not the page on my smartphone..
    In my previous reply I provided you with a http-link to a image which I screen captured from my Samsung S5 -which shows the problem…

    When I press to mobile menu so it opens, the image/logo along with the header content jumps to the right.
    BUT if I click a menu with a sublink, it corrects it self and moves back to left (where it’s suppose to be) just as it does when I click to close the menu…

    My opinion is that the problem therfor should be connected in some way, to the logo/image or the header information as all of this started from the moment when I added the code provided from here:
    https://kriesi.at/support/topic/change-order-of-header-elements-i-mobile-view/

    Thanks!

    • This reply was modified 8 years, 3 months ago by Sunique.
    June 4, 2016 at 5:38 am #642830
    Ismael

    Hi,

    It’s because of this css code:

    @media only screen and (max-width: 767px) {
.responsive #top #header {
    position: fixed !important;
}
}

    We don’t recommend fixed or sticky elements on mobile because some devices don’t handle this position type that well.

    Best regards,
    Ismael

    June 7, 2016 at 12:35 pm #644007
    Sunique

    Yeah I can see that it works much better without that snippet. It’s wierd though as it has been working fine just until recently.?
    So what’s your suggestion to solve the mobile menu issue?

    Seems that android/chrome is the only browser I can where this occures. Works like a charm on an iPhone…

    June 7, 2016 at 1:49 pm #644048
    Sunique

    Remove the snippet and changed some other code and now it looks fine.
    Guess I’ll have to live with the fact I can’t get the header to be fixed on all mobile platforms.

    Regards

    June 8, 2016 at 9:02 am #644619
    Vinay

    Hi,

    Fixed menu in mobile works please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
	position: fixed!important;
	}}

.avia_transform3d .show_mobile_menu #mobile-advanced {
    margin-top: -60px!important;
}

    Best regards,
    Vinay

    June 10, 2016 at 9:48 am #646121
    Sunique

    Great!
    Is there anyway for the menubar to be fixed at top and let the header disapear like it does in desktop mode?

    June 14, 2016 at 10:33 am #647880
    Vinay

    Hi,

    I’m afraid there is no easy way to make the menu fixed and the rest of the header scroll in mobile view. However it is possible to make the whole header fixed in mobile view Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    position: fixed!important;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 134px!important;
}}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.