Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 4, 2019 at 5:30 pm #1050065
    tendersqatar

    Hei, Guyz,

    Thanks again for the wonderful theme where i can optimise specific content elements to mobile users only.

    But I am using a mobile app with WebView for my website, so I would like to shift burger menu to the left side so that the users will feet it as a mobile app.

    //note: for a sticky logo I am already using the following code in my QUICK CSS
    * Change logo and menu position in tablets and mobile */

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
    position: fixed!important;
    }
    .responsive #top #wrap_all .menu-item-search-dropdown > a {
    display: none;
    }
    }

    January 5, 2019 at 12:43 am #1050131
    Vinay

    Hey tendersqatar,

    You may want to consider having a look at https://kriesi.at/documentation/enfold/header/#header-widget-position

    You can use the CSS without the widget code to position the mobile menu to the left and achieve a similar layout.

    If you have any issue please provide a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    January 5, 2019 at 7:28 pm #1050374
    tendersqatar

    Thank you so much for your valuable reply.

    I had gone through it, but i am still not clear what to do…

    Requirement:

    1. Position Menu to right & logo to left in desktops and tablets (already done)
    shrinking sticky header.

    2. position burger menu icon to the left for mobile devices (need to be done)
    sticky header but not shrinking.

    • This reply was modified 5 years, 3 months ago by tendersqatar.
    January 7, 2019 at 6:09 am #1050756
    tendersqatar

    Thank you somuch…its working goood…..!!

    I had also included the following codes also in quick css to make the menu more atractive

    //disable the search option form mobile screen
    .responsive #top #wrap_all .menu-item-search-dropdown > a {
    display: none;
    }
    //keep the header sticky not shrinking form mobile devices..
    .responsive #top #wrap_all #header {
    position: fixed!important;
    }

    Hope it doesnt create any conflicting issues…

    January 7, 2019 at 7:11 am #1050788
    Vinay

    Hi,

    I checked your site and everything looks good.

    let us know if we can close this ticket and in case if you have any issue you can always get back to us.

    Best regards,
    Vinay

    April 7, 2021 at 7:16 pm #1293131
    sitesme

    Hello,

    I am not getting any results by adding the CSS code above.

    The desktop version is already with the logo on the right and the menu on the left but the responsive version swaps it (not sure why).
    On mobile, I would like to have the logo aligned to the right and the burger icon on the left.

    Appreciate it if someone can help.

    April 10, 2021 at 6:37 am #1293608
    Rikard

    Hi sitesme,

    Please post a link to where we can see the elements in question. Also let us know exactly what you would like to change, and on which screen resolutions.

    Best regards,
    Rikard

    April 15, 2021 at 5:27 pm #1294602
    sitesme

    Hi Rikard,

    Please check the link in private.
    Right now, on desktop, you will see the burger icon on left and logo on right.
    We want it this way across all devices.

    For some reason, on mobiles (not sure tablets) it swaps the logo to the left and icon to the right which is not what we want.

    Thank you

    • This reply was modified 3 years ago by sitesme.
    April 19, 2021 at 6:09 am #1295105
    Rikard

    Hi sitesme,

    Thanks for the update and link. The site seems to be under construction though, so we can’t view it. Please post login details in private, so that we can see the site.

    Best regards,
    Rikard

    April 19, 2021 at 6:28 am #1295114
    sitesme

    Hi Rikard.

    It is live now, can you please check?

    April 21, 2021 at 4:19 am #1295661
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    float: right;
}
.responsive #top .logo {
    width: 100%;
}
.responsive #top #wrap_all .main_menu {
    right: auto;
}
}

    Best regards,
    Rikard

    April 21, 2021 at 7:19 am #1295701
    sitesme

    Spot on, Rikard.

    Thank you for your help.

    Out of curiosity: isn’t this a “bug”? The “standard” and widely used method is logo-left and menu-right, but when we change the settings to menu-left and logo-right, shouldn’t this rule apply to the mobile header as well?

    April 23, 2021 at 7:04 am #1296207
    Rikard

    Hi sitesme,

    It works as designed, it’s not a bug.

    Best regards,
    Rikard

    April 23, 2021 at 7:09 am #1296209
    sitesme

    Hi Rikard,

    Right, but when you give the user the option to change the logo/menu position, why does the mobile header doesn’t follow the same selection?

    April 25, 2021 at 7:06 am #1296570
    Rikard

    Hi sitesme,

    That might become a feature in a future release of the theme. Until then, this is how it works.

    Best regards,
    Rikard

    April 25, 2021 at 9:36 am #1296578
    sitesme

    Thank you, Rikard.

    April 27, 2021 at 6:36 am #1296905
    Rikard

    Hi sitesme,

    Thanks for the update. I’ll go ahead and close this thread for now, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Burger menu to the left’ is closed to new replies.