Mobile Menu style and function

[brproductions]

​
In mobile mode. I have the button saying Menu with the symbol double down beside it which I like. I’d like a small border around the button. Like for the color of Menu, border and the double down symbol to be #d3a356. On hover I’d like color to change to #ffffff. On click I’d like the double down symbol to become an X symbol. I want the Menu to push everything below it, down. The back ground of each Menu item to be #000000. Like each link to be a bigger size.

[paul.r]

Hi,

To achieve that, you can add this in your child theme’s style.css

body .x-navbar .x-btn-navbar.collapsed {
    color: #d3a356; 
    border: 1px solid #d3a356;
}

body .x-navbar .x-btn-navbar.collapsed:hover {
    color: #fff;
    border: 1px solid #fff;
}

body .x-navbar .x-btn-navbar .x-icon-angle-double-down:before {
    content: "\f00d" !important;
}

body .x-navbar .x-btn-navbar.collapsed .x-icon-angle-double-down:before {
    content: "\f103" !important;
}

Hope this helps.