Home Forums Weaver Xtreme Theme Hamburger position with Smart Menu

Viewing 16 posts - 1 through 16 (of 19 total)
  • Author
    Posts
  • #59932
    Weaver
    Keymaster

    @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.

    #59933
    scrambler
    Moderator

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

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

    #59934
    Weaver
    Keymaster

    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.

    #62294
    erich
    Participant

    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.

    #62295
    scrambler
    Moderator

    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/

     

    #62301
    erich
    Participant

    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!

    #62304
    scrambler
    Moderator

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

    #62334
    scrambler
    Moderator

    @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
    #62336
    erich
    Participant

    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

    #62337
    erich
    Participant

    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;}

     

     

    #62338
    scrambler
    Moderator

    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

     

    #62339
    scrambler
    Moderator

    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

    #62342
    erich
    Participant

    As always, I appreciate your help Scrambler. Thanks!

    #62708
    erich
    Participant

    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.

    #62709
    scrambler
    Moderator

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

    #62711
    erich
    Participant

    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/

     

Viewing 16 posts - 1 through 16 (of 19 total)
  • You must be logged in to reply to this topic.