Right-floating menu

[MK-Chris]

Hi there.

I'm just updating from a previous version of SmartMenus, whereby I was able to use the "right-menu-tip" class to float items to the right, like this:

<li>
  <a href="https://www.mkttl.co.uk/login" title="Log in / Register" class="right-menu-tip">Log in / Register</a>
  <ul class="mega-menu">
  <div class="no-cookies">
  <form method="post" action="https://www.mkttl.co.uk/users/authenticate">
  <input type="text" class="menu-input menu-margin" name="username" id="menu-username" value="Chris" placeholder="Username">
  <input type="password" class="menu-input menu-margin" name="password" id="menu-password" value="" placeholder="Password">
  <input type="hidden" name="from_menu" value="1" />
  <input type="submit" class="menu-margin" value="Log in" /><br />
  <a class="menu-margin" style="display: inline; background: #fff; padding: 0px; color: #000; text-shadow: 0px 0px 0px #000" href="https://www.mkttl.co.uk/register">Register</a>
  </form>
  </div>
  </ul>
</li>

In the latest version, this class appears to have disappeared. I thought I could use the 'data-sm-reverse' option to replace this:

<li data-sm-reverse="true">

  <a href="http://localhost:3000/login" title="Log in / Register">Log in / Register</a>
  <ul class="mega-menu">
  <div class="no-cookies">
  <form method="post" action="http://localhost:3000/users/authenticate">
  <input type="text" class="menu-input menu-margin" name="username" id="menu-username" value="" placeholder="Username">
  <input type="password" class="menu-input menu-margin" name="password" id="menu-password" value="" placeholder="Password">
  <input type="hidden" name="from_menu" value="1" />
  <input type="submit" class="menu-margin" value="Log in" /><br />
  <a class="menu-margin" style="display: inline; background: #fff; padding: 0px; color: #000; text-shadow: 0px 0px 0px #000" href="http://localhost:3000/register">Register</a>
  </form>
  </div>
  </ul>
</li>

However, this doesn't seem to work:

Am I using this wrong?

Thanks in advance!

Chris

[vadikom]

Hi,

The right-menu-tip class you used before is not coming from SmartMenus (I guess it's some custom class you had defined somewhere). Anyway, in addition to data-sm-reverse="true" (which reverts the alignment of the sub menu relative to the parent item) you would need to right-float the <li> element - e.g.:

<li style="float: right;" data-sm-reverse="true">

  <a href="http://localhost:3000/login" title="Log in / Register">Log in / Register</a>
  <ul class="mega-menu">
  <div class="no-cookies">
  <form method="post" action="http://localhost:3000/users/authenticate">
  <input type="text" class="menu-input menu-margin" name="username" id="menu-username" value="" placeholder="Username">
  <input type="password" class="menu-input menu-margin" name="password" id="menu-password" value="" placeholder="Password">
  <input type="hidden" name="from_menu" value="1" />
  <input type="submit" class="menu-margin" value="Log in" /><br />
  <a class="menu-margin" style="display: inline; background: #fff; padding: 0px; color: #000; text-shadow: 0px 0px 0px #000" href="http://localhost:3000/register">Register</a>
  </form>
  </div>
  </ul>
</li>

[MK-Chris]

Brill, thanks so much! I hadn't realised that class was one of mine; it's a long time since that part was written, apologies.