Menu Effects in Fixer Theme

I would like to add some effect to my menu in Fixer theme. I have source there, from your Upfront Custom CSS tutorial.
I dont understand how I can implemente these effects into navigation CSS. Can you please help me with that? Thank you very much! :

  • Kasia Swiderska

    Hello Ondrej,

    Unfortunately you can only use effects that are not requiring additional changes in menu html markup. You can only use those that will work on clean a tags. So for first effect add those styles to global CSS in Upfront editor

    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a::before,
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a::after {
    	display: inline-block;
    	opacity: 0;
    	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
    	transition: transform 0.3s, opacity 0.2s;
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a::before {
    	margin-right: 10px;
    	content: '[';
    	-webkit-transform: translateX(20px);
    	-moz-transform: translateX(20px);
    	transform: translateX(20px);
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a::after {
    	margin-left: 10px;
    	content: ']';
    	-webkit-transform: translateX(-20px);
    	-moz-transform: translateX(-20px);
    	transform: translateX(-20px);
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a:hover::before,
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a:hover::after,
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a:focus::before,
    div#page .upfront-output-region-container .upfront-output-module .default [data-style="horizontal"] > > a:focus::after {
    	opacity: 1;
    	-webkit-transform: translateX(0px);
    	-moz-transform: translateX(0px);
    	transform: translateX(0px);

    kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.