Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 4, 2017 at 10:28 am #803543
    sitesme

    Hi

    This menu looks amazing under desktop: http://dns.d.pr/znVP36/4svf2cAT – from the “creative studio” demo: http://kriesi.at/themes/enfold-creative-studio/

    However, on mobile it looks really tacky and lacks on the same wow effect as it does under desktop.
    Is it possible to have a similar look on mobile and tablets, like the desktop?

    Thank you

    June 4, 2017 at 5:30 pm #803642
    Victoria

    Hey sitesme,

    Yes, you can try to apply the styles from the desktop menu to change the mobile menu. There might be a solution here that would work for you:
    https://kriesi.at/support/topic/burger-menu-mobile-menu-unconsistancy/

    If you need further assistance please let us know.
    Best regards,
    Victoria

    June 5, 2017 at 6:52 am #803777
    sitesme

    Hi

    I didn’t try the code on that page but I could see the demo result for that code and the page is very clunky and buggy on mobile.
    The overall idea is there, yes, and the menu looks better this way, but it is a big mess.

    I was looking forward to have a moderator to provide me a better / clean code that could basically reproduce the desktop look in the mobile version.

    Many thanks.

    June 7, 2017 at 9:49 am #804966
    Nikko

    Hi,

    Can you try to add this css code in Quick CSS (located in Enfold > General Styling):

    
@media only screen and (max-width:767px) {
  #advanced_menu_toggle {
    display: none !important;
  }

  #header_main .main_menu {
    position: absolute;
    right: 0;
    top: 0;
  }

  #header_main .avia-menu {
    display: block;
    margin-right: 0;
  }

  .responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a {
    height: 80px;
    line-height: 80px;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    June 7, 2017 at 12:54 pm #805061
    sitesme

    You are a star Nikko, that worked perfectly :)

    However, the mobile version is showing a white bar at the top (when the page is set to have a transparent bar) and we can not see the mobile icon anymore because I guess it is also white (in a white background). Please check the page in PVT.

    I would like to remove that white bar permanently, from both desktop and mobile versions and make it always transparent.

    I was using this code from Mike:
    .header_color .header_bg {background-color: transparent!important; }

    Is there anything we can add to get all sorted out?

    Many thanks.

    June 8, 2017 at 8:46 am #805460
    Nikko

    Hi,

    Try adding this css code in Quick CSS:

    #header .header_bg {
    background-color: transparent !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    June 12, 2017 at 10:47 am #806807
    sitesme

    Hi Nikko,

    The bar is still showing on mobile if the page has set the transparent header. Please check the page in private, on mobile if possible.

    Thank you

    June 13, 2017 at 2:02 pm #807451
    Victoria

    Hi sitesme,

    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 or in in your child theme style.css

    
@media only screen and (max-width: 450px) {
    .responsive #top .logo { opacity: 0; }

    #top .av_header_transparency #header_main, #top 
    .av_header_transparency .avia-menu.av_menu_icon_beside {
        background: transparent !important;
        height: 0;
    }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    June 13, 2017 at 2:16 pm #807469
    sitesme

    Hi Victoria,

    That worked perfectly, thank you :)

    Please keep this topic open as there might be some related issues.

    June 13, 2017 at 2:18 pm #807470
    Yigit

    Hey!

    Glad Nikko and Victoria could help :)

    Sure, we will keep the thread open and wait to hear from you. Thread will be on hold until you reply :)

    Regards,
    Yigit

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