Menu alignment with fixed to top on scroll

[dnadesign]

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.

[scrambler]

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)

[scrambler]

I also forgot the rule to clear the woocomerce banner

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

 

[scrambler]

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

[dnadesign]

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

 

[scrambler]

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

 

[dnadesign]

Thanks once again Scrambler – Totally in your debt!

[Author]

Posts