bandb menu icon colour

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

bandb menu icon colour

Post by Barrowboy »

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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: bandb menu icon colour

Post by DIGI3 »

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.
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: bandb menu icon colour

Post by Barrowboy »

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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: bandb menu icon colour

Post by DIGI3 »

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.
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: bandb menu icon colour

Post by Barrowboy »

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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: bandb menu icon colour

Post by DIGI3 »

Right click on the element and choose 'inspect'.
Image
Not getting the answer you need? CMSMS support options
Barrowboy
Forum Members
Forum Members
Posts: 223
Joined: Mon Dec 16, 2013 4:09 pm

Re: bandb menu icon colour

Post by Barrowboy »

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.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: bandb menu icon colour

Post by DIGI3 »

::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 :)
Not getting the answer you need? CMSMS support options
Post Reply

Return to “Layout and Design (CSS & HTML)”