Change hover on menu overlay

Comments

• Albert

  December 2015

  Hi,
  
  menu style can be changed under Theme options > Menu & Action Bar > Menu section. So if you won't be able to change what you need there, please send us link to your site and we'll try to help you.
  
  Thanks!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• tradeyourstory

  December 2015

  Hi!

  
  

  I cannot give you the url, because the coming soon mode is on. I have enclosed a screenshot for you, hope that helps. I know the setting part of the options, but this is not in there.

  https://www.evernote.com/l/AimhXvjZeYNAmpJTxmE5lawiHMikP1TzWrI
  

  
  

  Thanks
• dorelextrabold

  December 2015

  I've actually encountered the same problem so it would be wonderful if there would be a solution css wise.
• dorelextrabold

  December 2015

  Hi Muffingroup and Jenneke,

  
  

  This CSS code seemed to do the trick for me. Try it out!

  
  

  #overlay-menu ul li a:after {

      margin-left: 20px;

      content: 'Place the character u would like apear here';

      -webkit-transform: translateX(-20px);

      -moz-transform: translateX(-20px);

      transform: translateX(-20px);

  }

  
  

  #overlay-menu ul li a:before {

      margin-right: 20px;

      content: 'Place the character u would like apear here';

      -webkit-transform: translateX(20px);

      -moz-transform: translateX(20px);

      transform: translateX(20px);

  }
• Albert

  December 2015

  @tradeyourstory Ok, so what you refer to requires css customization but for that we need link to your site. So or you would send us private message with access or just let us know when site would be online so we can have a look on it.
  
  You can try the solution from @dorelextrabold but we can not guarantee that this would work until we won't get the link.
  
  Thanks!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• tradeyourstory

  December 2015

  ok I'm building on www.prikkel.nl password 0000. I will try your solution as well dorelextrabold, but maybe you guys will check it out on my website if it's the right CSS code for my site?

  
  

  Thanks both!

  
  

  High Five

  
  

  Jenneke
• Albert

  December 2015

  Did you changed something? Because menu does not work as supposed what you can see on http://pasteboard.co/7TZwy0j.png
  
  If you changed something, would be great if you can go back to original version.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• tradeyourstory

  December 2015

  Yes I have tried the code from dorelextrabold, but as you could see, it's not working. Sorry for that. It's the way it was now. 
• Albert

  December 2015

  Good to see that you remove this code so we are bale to have a look on it ourselves. Please use our css and you will get what need:

  #overlay-menu ul li a::before, #overlay-menu ul li a::after { content: "" !important; }
  #overlay-menu ul li a:hover { color: #000 !important; font-weight: 100 !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• tradeyourstory

  December 2015

  You guys are amazing. thank you so much!
• tradeyourstory

  December 2015

  I do have a question. The menu-overlay is on 700px width, but on mobile the menu items are wider than the screensize. It looks like they are not scaling at all. I already changed the font-size for the menu items to "em" but It's not working out.

  
  

  Did I do something wrong in my custom CSS or can you tell me how to make it visible acceptabel on mobile?

  
  

  Hope you can help me out,
• Albert

  December 2015

  It's because you set fixed size for menu items. If you want, you can change menu items sizes with below css:

  @media only screen and (max-width: 767px) {
      #overlay-menu ul li a { font-size: 20px !important; }
  }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next