Home Forums Weaver Xtreme Theme Menu alignment with fixed to top on scroll

Topic Resolution: Resolved
Viewing 7 posts - 17 through 23 (of 23 total)
  • Author
    Posts
  • #67384
    dnadesign
    Participant

    Have Plus

    Have done – Looks a right royal mess. Have added the min menu via a widget shortcode. Have a looksee. Aplologies but have been working for 21hrs so have some arc eyes.

    #67385
    scrambler
    Moderator

    You forgot to hide the mini menu from the header in
    Customizing ▸ Visibility > Menus > Header Mini menu > Hide on all devices

    To get the logo to show by default, then Hide when the menu is fixed, change
    /* Hide Custom Logo when fixed */
    #nav-primary .custom-logo-on-menu {display:none !important;}
    #nav-primary .wvrx-fixonscroll .custom-logo-on-menu {display:block !important;}

    by
    /* Hide Custom Logo when fixed */
    #nav-primary .wvrx-fixonscroll .custom-logo-on-menu {display:none !important;}

    You need to add the rule for the white background when fixed
    .menu-primary .wvrx-menu-container.wvrx-fixonscroll {background-color:white;}

    I assume you want the mini menu hidden when menu is fixed, if so add
    .menu-primary .wvrx-menu-container.wvrx-fixonscroll .wvrx-menu-html {display:none;}

    To move the mini menu on the same line
    .wvrx-menu-html {margin-top:-25px !important;}

    Using a widget shortcode seems to be causing a problem on mobile.
    Can you use an actual Extra menu shortcode instead (see the Plus extra menu shortcode syntax)

    #67386
    scrambler
    Moderator

    I also forgot the rule to clear the woocomerce banner

    .menu-primary .wvrx-menu-container {margin-top:40px;}

     

    #67387
    scrambler
    Moderator

    I found why the widget shortcode was hidden on mobile.

    So as a summary, replace

    /* Hide Custom Logo when fixed */
    #nav-primary .custom-logo-on-menu {display:none !important;}
    #nav-primary .wvrx-fixonscroll .custom-logo-on-menu {display:block !important;}

    by

    /* Hide Custom Logo when fixed */

    #nav-primary .wvrx-fixonscroll .custom-logo-on-menu {display:none !important;}
    .menu-primary .wvrx-menu-container.wvrx-fixonscroll {background-color:white;}
    .menu-primary .wvrx-menu-container.wvrx-fixonscroll .wvrx-menu-html {display:none;}
    .wvrx-menu-html {margin-top:-25px !important;}
    .menu-primary .wvrx-menu-container {margin-top:45px;}
    .is-menu-mobile .wvrx-menu-container .wvrx-menu-html ul.collapsed {display:block;}
    @media (max-width:500px){.wvrx-menu-html {margin-top:-10px;}}

    #67388
    dnadesign
    Participant

    Thank you so much Scrambler

    Looking much better and way more responsive. Decided not to hide the logo and mini menu on scroll – and am very happy with the outcome (even on my tini-tiny phone) :).

    You rock – Have a super weekend

     

    #67391
    scrambler
    Moderator

    @dnadesign,

    Remember you can adjust the logo size with the height parameter in settings

    The vertical position of the menu when fixed could be adjusted with
    .is-desktop .menu-primary .wvrx-menu-container.wvrx-fixonscroll ul {padding-top:15px;}
    .menu-primary .wvrx-menu-container.wvrx-fixonscroll .wvrx-menu-html {margin-top:-10px !important;}

    Your cart is shifted down from the two other icons because of a rule

    .wpmenucart-display-right {
    float: right !important;
    padding-top: 40px;
    }

    The rule below with a padding of 20px would align them

    .wpmenucart-display-right {padding-top: 20px !important;}

     

    #67403
    dnadesign
    Participant

    Thanks once again Scrambler – Totally in your debt!

Viewing 7 posts - 17 through 23 (of 23 total)
  • You must be logged in to reply to this topic.