Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 30, 2014 at 9:21 am #372984
    yaron1604

    Hi,

    I am using Enfold in RTL WordPress environment. I have two problems with the mobile menu
    First is aligning the logo to the left and the second is disabling the navigation arrows overlapping the menu items.
    Could you please post a solution?

    Thanks,

    Yaron

    December 30, 2014 at 1:52 pm #373089
    Yigit

    Shalom Yaron!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
margin-right: -10px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}

    This should fix mobile menu issue. Would you like to align logo to right and menu to left?

    Cheers!
    Yigit

    December 30, 2014 at 9:00 pm #373284
    yaron1604

    Thanks Yigit!

    The code fixes half of the issue. The menu arrow icons are now aligned but the logo still over laps with the menu icon
    I would like to align the logo left and live the menu icon on the right side (in mobile)
    By the way, is there any way to disable the arrow icons on the mobile menu completely?
    Mary Christmas!

    Yaron

    December 30, 2014 at 10:42 pm #373338
    Elliott

    Hi!

    Try adding this to your custom CSS.

    .responsive .logo img { right: 60px !important; }
#mobile-advanced a:before {
    display: none !important;
}

    Cheers!
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    December 31, 2014 at 8:02 am #373427
    yaron1604

    Thank you Elliott,

    I tried the code, the logo is now cropped on the left side both in mobile and in desktop mode

    December 31, 2014 at 12:26 pm #373460
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
.logo, .logo a, .logo img {
float: left;
right: 0!important;
}}

    Best regards,
    Yigit

    December 31, 2014 at 3:50 pm #373578
    yaron1604

    Thanks Yigit,

    Tried it but the logo is still cropped….
    The added code causes the logo to lose alignment and go up a couple of pixels.
    I am using a custom header of 80px with a 340x80px logo. I have also edited the avia.js to get a more controlled header (https://kriesi.at/support/topic/controling-the-size-of-shrinking-header/). I tried resetting all the values to see if this is the reason but still no luck
    You can see the result here cropped logo on mobile
    Thanks,
    Yaron

    December 31, 2014 at 5:40 pm #373616
    Elliott

    Hey!

    Your screenshot seems to be broken. Try imgur.com out.

    Add this to your custom CSS.

    .logo, .logo a { overflow: visible !important; }

    Regards,
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    January 1, 2015 at 2:56 pm #373814
    yaron1604
    This reply has been marked as private.
    January 1, 2015 at 6:17 pm #373863
    Elliott

    Hey!

    It looks fine on my end except on very small screens where your logo is just too big so it flows offscreen.

    You can add this to decrease it’s width a bit.

    @media only screen and (max-width: 479px) {
.responsive .logo img { width: 200px !important; }
}

    Regards,
    Elliott

    January 4, 2015 at 8:48 am #374657
    yaron1604

    Thanks Elliott,

    I really appreciate the efforts but it simply doesn’t work…
    Working with 1280px displays crops the logo. An all other large desktop displays the logo aligns left out of the page borders and on mobile phone displays the logo is too small and aligns too high. I have deleted all the code except this:
    #mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
    margin-right: -10px;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    }
    Maybe it would be easier just to go with Yigit’s suggestion and align logo to right and menu to left?

    Yaron

    January 4, 2015 at 2:29 pm #374690
    Snurp

    Hi.
    I have a problem with transparency on my mobile menu.
    I´ve used transparent headers for my pages, but when resized to mobile size, the header is not transparent, it´s showing the headerarea color set in options.
    Is this possible to change?

    My site is
    http://www.hey.no

    Best regards
    Snorre

    January 5, 2015 at 5:01 pm #375158
    Yigit

    Hey!


    @yaron1604     Please add following code to Quick CSS

    #advanced_menu_toggle, #advanced_menu_hide { left: 0; rigth: auto; }


    @snurp     Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 769px) {
.page-id-452 div#header_main {
background-color: #93d733;
}
.page-id-452 a#advanced_menu_toggle {
background-color: #93d733!important;
}

    Best regards,
    Yigit

    January 5, 2015 at 8:19 pm #375294
    yaron1604

    Perfect Yigit, thank you!

    Yaron

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘mobile menu’ is closed to new replies.