Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 12, 2016 at 1:48 am #611597
    webWahine

    Hello

    For the close button that appears when the mobile menu is open –

    .show_mobile_menu #advanced_menu_hide {}

    My client wants just and X and no circle around it – I can change the background color, but do I need to replace this with an image or is there some css to make it just a whote X and another color on hover? Thanks! :)

    April 12, 2016 at 6:34 am #611675
    Basilis

    Hey webWahine!

    Can u please link us your web site?
    Also, if any cache please disable so we can provide the code needed and move on with the changes.

    Thanks a lot

    Best regards,
    Basilis

    April 12, 2016 at 6:41 pm #612083
    webWahine

    Sure – here you go (in private)

    April 12, 2016 at 6:57 pm #612096
    Vinay

    Hi!

    Your site is password protected. Please try the below code

    .show_mobile_menu #advanced_menu_hide {
    background: transparent;
    border: none;
}

    The above will give you an X inside the circle if you like to change it please upload your icon to wordpress media library and use it as the background image.

    You can link a pngimage ot use a plugin like https://wordpress.org/plugins/svg-support/ to upload svg icons.

    Best regards,
    Vinay

    • This reply was modified 8 years, 7 months ago by Vinay.
    April 12, 2016 at 7:05 pm #612108
    webWahine

    So sorry I forgot about that – I’ll try this and get back to you :) Password is in private.

    April 12, 2016 at 7:35 pm #612121
    Vinay

    Hey!

    No problem :) We will keep this ticket open. In case you have more questions please feel free to get in touch with us.

    Regards,
    Vinay

    April 13, 2016 at 12:42 am #612250
    webWahine

    Ok, so I did have something just like that but I want to remove the cricle entirely and just have an X. Do I need to use a png or can I tweak the css some more, please?

    April 14, 2016 at 4:56 pm #614115
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #advanced_menu_hide:before {
    content: 'X';
    font-family: 'open sans';
}

    Best regards,
    Yigit

    April 14, 2016 at 9:49 pm #614282
    webWahine

    That worked, thank you! Another question, please. I have the background set to an alpha of 0.7 so you can still see the hamburger underneath when the mobile menu opens. I’m assuming it can be set to a display: none; but how would I do that, please?

    April 15, 2016 at 1:03 am #614419
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .show_mobile_menu #advanced_menu_toggle {
    opacity: 0;
}

    Best regards,
    Yigit

    April 15, 2016 at 2:06 am #614474
    webWahine

    That would be perfect but the entire site uses the mobile menu at all sizes so if I add that in it will disappear. Thoughts? :)

    April 15, 2016 at 2:08 am #614475
    Yigit

    Hey!

    This will change its opacity to zero when mobile menu is opened and change opacity back 1 once it is closed. Does not it sound like a dream? :)

    Regards,
    Yigit

    April 15, 2016 at 5:23 pm #615048
    webWahine

    A dream, indeed!!!!! Works like a charm – thanks so much! :)

    April 15, 2016 at 5:41 pm #615055
    Yigit

    Hey!

    You are welcome :) Enjoy your weekend!

    Best regards,
    Yigit

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