Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • June 10, 2016 at 11:13 am #646143
    Mathuseo

    Hi,

    I’ve changed in Enfold settings menu and logo position to “Logo right, Menu left”. Works fine. But on mobile devices the menu is still to the right. I build a mobile website with Enfold, specially for mobile devices and I need the menu to the left. Can you please help me how to change the menu position.

    • This topic was modified 8 years, 6 months ago by Mathuseo.
    June 10, 2016 at 12:34 pm #646167
    Mathuseo

    One additional question to menu for mobile devices. How can I activate sticky menu for mobile devices. In Enfold settings I found this:

    Header > Header behaviour > Sticky Header
    [x] If checked the header will stick to the top of your site if user scrolls down (ignored on smartphones).

    June 11, 2016 at 10:02 pm #646668
    Mathuseo

    Can anyone help?

    June 11, 2016 at 10:24 pm #646679
    Vinay

    Hi,

    Sorry for the delay. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
/* Change logo and menu position in tablets and mobile */
@media only screen and (max-width:767px) {
#advanced_menu_toggle {
left: 0!important;
right:auto!important;
}
.logo {
    float: right!important;
    width: auto!important;
}
}

    Best regards,
    Vinay

    June 11, 2016 at 11:12 pm #646697
    Mathuseo

    Hi Vinay,

    thank you very much.
    Any idea for my second question?

    Best,
    Mathuseo

    June 12, 2016 at 2:05 am #646733
    Vinay

    Hi,

    Sorry i missed that one earlier, to make the header fixed in mobile devices please use the below css

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

    Best regards,
    Vinay

    December 21, 2017 at 5:22 pm #891214
    UPON

    Using the Code above doesnt work anymore. On mobile the menu toogle overlaps the logo.

    /* Change logo and menu position in tablets and mobile */
    @media only screen and (max-width:767px) {
    #advanced_menu_toggle {
    left: 0!important;
    right:auto!important;
    }
    .logo {
    float: right!important;
    width: auto!important;
    }
    }

    Please help and provide new code. We need logo right, menu left like on desktop. Thanks!

    December 21, 2017 at 5:24 pm #891217
    UPON
    This reply has been marked as private.
    December 21, 2017 at 6:37 pm #891259
    Victoria

    Hi UPON,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    left: 0;
    right: auto;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 2, 2018 at 12:35 pm #892458
    UPON

    Great thank you Victoria!

    January 3, 2018 at 1:07 pm #892801
    Victoria

    Hi UPON,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 27, 2021 at 10:24 am #1326634
    Jui

    Hallo,

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

    Wenn ich diesen Code verwende, dann ist der Header über der Webseite und verdeckt den oberen Teil des Content.

    Wie kann ich das beheben?

    October 27, 2021 at 1:29 pm #1326676
    Rikard

    Hi Jui,

    Could you try to explain your intentions a bit further, and post a link to where we can see the actual elements please? If you have a screenshot highlighting your intentions, then please share it with us.

    Best regards,
    Rikard

    October 27, 2021 at 2:25 pm #1326696
    Jui

    Hi Rikard,

    see on the Page. The link is privat.
    the upper part of the page cannot be seen in the mobile view

    you understand?

    best regards

    October 27, 2021 at 3:04 pm #1326709
    Jui

    Hello, the screen

    null

    Der erste Text der Seite verschwindet unter dem Header,
    wenn ich den Code einsetze.

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

    Der header soll auch bei Mobiler Ansicht stehen bleiben.

    **************************

    The first text of the page disappears under the header,
    when I use the code.
    The header should also remain in the mobile view.

    October 28, 2021 at 5:04 am #1326750
    Rikard

    Hi Jui,

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

    @media only screen and (max-width: 767px) {
div.container_wrap_first {
    margin-top: 151px;
}
}

    Best regards,
    Rikard

    October 29, 2021 at 1:44 pm #1326998
    Jui

    Hi Rikard,

    Thanks, this work perfect!

    Best regards Jui

    October 30, 2021 at 7:11 pm #1327097
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Change menu and logo position on mobile devices’ is closed to new replies.