Hamburger position with Smart Menu

[Weaver]

@scrambler,

The guide has the styling for positioning the hamburger for the standard menu.

That doesn’t work for Smarat Menus (which are no longer exclusive to Weaver Xtreme Plus). I’ve had a request to add an option to force the mobile (hamburger) menu to always be used (no standard menu at all), and to put the hamburger on the right. I’m stuck on trying to get the hamburger on the right.

It almost seems that using right the hamburger should follow the menu bar alignment, but that would break existing sites, so there would need to be a separate hamburger align option. And it should work with standard or smart menus, and with the menu switch point option when used with SmartMenus.

[scrambler]

The rule below seems to align the smart menu hamburger right for me

.is-menu-mobile .wvrx-menu-button  {float:right;}

[Weaver]

Ah – I needed the .is-menu-mobile. Or !important, or an @media wrap.

Thanks.

The request was from my son for his site. He is of the opinion that having only the hamburger for all versions of a site is becoming common if not standard practice these days.

[erich]

I used the rule above to align the menu button to the right, but all my menu options still align to the left when the menu is expanded. How can I get them to be right-aligned so they are under the hamburger?

I looked at the smart menu options and didn’t see anything there.

[scrambler]

Have a look at that guide article below and if you need more help post a link to your site

https://guide.weavertheme.com/mobile-menu-advanced-customizations/

 

[erich]

Thanks Scrambler!

Was able to adjust and get what I wanted, although I had to turn off the smart menu option in order to align the actual menu items themselves to the right of the page.

Works for me!

[scrambler]

I can give you revised CSS so you can keep the smart menu, just post a link with the smart menu on

[scrambler]

@erich

the modified rules for Smart menus are below

/* Align sub menu right */

.is-menu-mobile ul.wvrx-menu.sm {text-align:right;}
.is-mobile .wvrx-menu ul {text-align:right;}

/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li > a.has-submenu {padding-right:2em;}
.is-mobile .menu-primary .wvrx-menu.sm a span.sub-arrow::after {margin-right:1.5em;}

I will update the Guide article

[erich]

Hi Scrambler,

It isn’t working for me.  I pasted what you provided above (along with the original float:right rule for the button itself) but the menu items are still left aligned.  I tried adding !important but that didn’t make any difference.

/*menu adjustments */
.is-menu-mobile .wvrx-menu-button {float:right}
.is-menu-mobile ul.wvrx-menu.sm {text-align:right}
.is-mobile .wvrx-menu ul {text-align:right}
/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li > a.has-submenu {padding-right:2em;}
.is-mobile .menu-primary .wvrx-menu.sm a span.sub-arrow::after {margin-right:1.5em;}

 

SEE FIX BELOW

[erich]

Resolved:

looks like adding float:right to .is-menu-mobile ul.wvrx-menu.sm instead of just text-align:right does the trick:

 

/*menu adjustments */
.is-menu-mobile .wvrx-menu-button {float:right}
.is-menu-mobile ul.wvrx-menu.sm {text-align:right;float:right}
.is-mobile .wvrx-menu ul {text-align:right}
/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li > a.has-submenu {padding-right:2em;}
.is-mobile .menu-primary .wvrx-menu.sm a span.sub-arrow::after {margin-right:1.5em;}

 

 

[scrambler]

Strange, it works for me without it.

What browser are you viewing on?

Did it also not work on desktop when reducing the browser to mobile size?

Could you remove the float:right and post back so I could check what the difference is with my configuration

 

[scrambler]

Never mind, you must have set the sub menu to a fixed width, in that case the float:right is necessary.

I will add it to the tutorial as it does not hurt when the submenu is full width

[erich]

As always, I appreciate your help Scrambler. Thanks!

[erich]

I guess it’s still not quite right.  I was messing with the menu width and you can see that the items themselves are actually still left-aligned within the UL.

[scrambler]

It is not the case for me, so I need a link to your site showing the issue

[erich]

Here Scrambler,

I intentionally increased the width to see what would happen if I add another item that’s longer text.

https://hemmervineyards.com/staging/5942/our-story/

 

[Author]

Posts