Edit top nav off canvas wrapper inner style

[LPalm_1979]

Hi everyone

Please help! I need guidance regarding the CSS for HTML output.

I am using a Flare top nav skin template. Its set up so that when the screen is viewed via a tablet or mobile a slide out menu appears from the right.

box shadow2.PNG

I would like to remove the box border from the off canvas wrapper inner(main body of text) and apply a darker fade out colour when the side menu action is activated. I'm guessing this style is created using specific Flare code and may include JavaScript. I have a little CSS/HTML knowledge and have previously made minor changes to other html skins, but when I look at the Flare output source code for this action, I am totally lost. Can anyone advise me on how to remove the shadow and apply a different colour to this standard Flare template?

Many thanks!

Lin

[Psider]

I had a poke around in the customer showcase examples and I think it might be a style in the foundation css called ".js-off-canvas-exit".

I think it'd just be the box-shadow setting you'd need to specify yourself. Whether you can specify it in your skin or topic css I'm not sure. It might need !important against the property.

To find the original settings in your output, inspect your output, click on the foundation css file link in the Styles panel to open the css in the Source tab, then search for the style name. Or if the style name doesn't appear in your version, try searching for box-shadow and when you find a likely looking style, change the colour value to see what updates in the output.

[LPalm_1979]

Hi Psider

Thanks for the reply. I've managed to remove the box shadow by adding the class .js-off-canvas-exit to the stylesheet and setting box-shadow: none. It works a treat!

Lin