My Legal Menu Odyssey. Again. Sorry.

Hello Stack Ideas

(I am putting this in the Vanilla section as there is no EsMobile section)

Ok you guys kindly provided me with a fix to align my legal menu on the mobile template.

(Horizontal and on aligned to the right)

That is this here:

https://stackideas.com/forums/getting-a-2nd-menu-to-work-with-mobile-template

.elegant-menu.nav-pills > li + li  {

  margin-left: 10px;

}



.elegant-menu.nav-pills li {

  list-style-type: none;

}





@media (max-width:768px) {

    .nav.menu.nav-pills > li + li {

        margin-left: 10px;

    }



    .nav.menu.nav-pills > li {

      float: left;

      list-style-type: none;

    }    

}

This worked great but then I switched to Vanilla and i guess that this broke!?!

Also I had weird formatting issues on Vanilla that have since been fixed here:

https://stackideas.com/forums/please-help-me-remove-the-green-box-from-footer-menu

.nav-pills>li.active>a, 

.nav-pills>li.active>a:focus, 

.nav-pills>li.active>a:hover {

    color: #000000;

    background-color: #f5f5f5;

}



.sp-module ul > li {

    border-bottom: 1px solid #f5f5f5;

}

I think that these two issues are some how related.

Is it possible to:

a) Have the Footer Menu aligned horizontally on the bottom right of the es Mobile template.
(Which I guess means update the first block of code above for Vanilla)
b) Not mess up the formatting for the formatting on the Desktop Vanilla Template.

Sorry for being paranoid.

thank you for your patience

Paul