Change hover on menu overlay

tradeyourstory · December 2015

Hi!

I would like to change the hover in menu type overlay. Now there are brackets on hover, but I would like to change it into another color and font weight and remove the brackets. I have searched through the entire code

probably not good enough because I haven't found it haha

Can you help me out?

Thanks!

Jenneke

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!

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!

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.

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; }

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; }
}

Change hover on menu overlay

Comments