CMS Made Simple Forums

Hi
Bandb theme 1.0.2 and the latest cmsms.

and bandb_topnav

Can you explain how I can change the colour of the menu icon shown on narrow widths. (Three lines.)
Would like to change both normal and hover.

There appears to no css for this.

Thanks

It's a bit confusing as it uses box-shadow to create the lines. I often just replace the menu-icon button with a fontawesome icon or an image, but if you want to keep the existing method you can inspect the css (including the ::after) and you'll see where the colour is set - background and box-shadow on .menu-icon:after.

To replace it with an icon or otherwise, just replace the <button ...> code with whatever you like, making sure it still has data-toggle="top-menu" in it.

Hi
I cannot find .menu-icon: after in the bandb css?

Am I looking in the wrong place.

Or do I have to add it?

Thanks

It's in the foundation css, so add a line to the bandb css to override it. You can see what the existing code is by using the inspector.

Sorry to be a pain

But how do I inspect the foundation.css were is it. Cannot find that anywhere even on the server.

Thanks

Right click on the element and choose 'inspect'.

Hi Dig

Thanks for you help, something else I have learnt?

The ::after is not showing in my template so I inspected the icon which gave me the foundation.css

Decided to use CSS to change the colour so added a bit of CSS to our file, mainly because we change the colour and content of the site every three months it will be easier.
Thanks again.

::after is a pseudo-element, which means it doesn't actually exist in the markup but can be targeted by css anyway. Your next homework task is to read up on pseudo-elements and pseudo-classes