Menu alignment with fixed to top on scroll

[dnadesign]

Hi There, using Weaver xtreme and Plus. My primary menu is set to fixed to top on scroll. I have a site logo placed to the left and a mini menu on the right of the primary menu. I need to move the primary menu up so that it is vertically centered between the logo and the mini menu. I have searched the forums and tried all sorts of css to no avail. Please help:

Custom Css wrt to menu and scroll:

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

#myfixedmenu {position:fixed;width:100%;top:10;left:0;}

.menu-primary .custom-logo-on-menu img {
margin-top: 2px; }

Link: https://dna270.dnaonline.co.za/

Settings:

### Weaver System Info ###

— WordPress Configuration —

Site URL: https://dna270.dnaonline.co.za
Home URL: https://dna270.dnaonline.co.za
Multisite: No
Version: 5.6.1
Language: en_ZA
WP_DEBUG: Disabled
WP Memory Limit: 40M
Permalink: /%postname%/
Show On Front: posts
Page On Front: n/a
Page For Posts: n/a
Current Theme: Weaver Xtreme (4.4.4.1)
Post Types: post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, oembed_cache, user_request, wp_block, wpgv_voucher_product, voucher_template, product, product_variation, shop_order, shop_order_refund, shop_coupon, wpcf7_contact_form, atw_slider_post

— Weaver Xtreme Configuration —

Weaver Xtreme Version: 4.4.4.1
Theme Support Version: 4.4.1
Xtreme Plus Version: 3.1.1

— Server Configuration —

Operating System: Linux
PHP Version: 7.2.34-9+0~20210112.53+debian9~1.gbpfdd1e6
MySQL Version: 5.5.5
jQuery Version: 3.5.1
Server Software: Apache

— PHP Configuration —

Local Memory Limit: 256M
Server Memory Limit: 96M
Post Max Size: 32M
Upload Max Filesize: 32M
Time Limit: 60
Max Input Vars: 2500
Display Errors: N/A

— WordPress Active Plugins —

Akismet Anti-Spam: 4.1.8
Cart All In One For WooCommerce: 1.1.0
Classic Editor: 1.6
Contact Form 7: 5.3.2
Contact Form 7 Skins: 2.4.1
Custom Add to Cart Button Label and Link: 1.5.3
Facebook for WooCommerce: 2.2.0
Gift Cards (Gift Vouchers and Packages) (WooCommerce Supported): 4.1.0
PayJustNow for WooCommerce: 1.20
Really Simple SSL: 4.0.7
Weaver Show Posts: 1.5.1
Weaver Show Sliders: 1.5.1
Weaver Xtreme Plus: 3.1.1
Weaver Xtreme Theme Support: 4.4.1
WooCommerce: 4.9.2
WooCommerce Menu Cart: 2.9.6
WooCommerce PayFast Gateway: 1.4.17
YITH WooCommerce Product Add-ons: 1.5.34
YITH WooCommerce Quick View: 1.4.8
YITH WooCommerce Wishlist: 3.0.18

— WordPress Inactive Plugins —

Advanced Shipment Tracking for WooCommerce: 3.2.1.3

### End System Info ###

[scrambler]

The problem is going to be when the browser gets smaller (before it turns to mobile).

At one point, the Menu will not fit between the two, what would you like to happen then, have it dropped below, or have it become two lines?

[scrambler]

If you want to move the menu down when there is no space, try the following:

First set the primary menu background color to transparent
Then add the rules below to the theme Global Custom CSS Rule box.

• The first one makes the menu float at the top and clear the black banner
• The second restores the white background when fixed
• The third shifts the menu down when it does not fit between the logo and mini menu. If the menu items change you will have to adjust the 930 threshold
• The fourth corrects the position of the mini menu on mobile as it did not look right.

#nav-primary {position:absolute;top:80px;}
.menu-primary .wvrx-menu-container.wvrx-fixonscroll {background-color:white;}
@media and {max-width:930px){#nav-primary {top:130px;}}

.is-mobile #nav-header-mini {clear:none;margin-top:30px;}

Another way to do that with different behavior if you have the Plus plugin, would be to add the logo to the menu bar instead of in the header, then add the mini menu with a Plus extra menu shortcode placed in the menu Right HTML box

[dnadesign]

Thanks Scrambler – Worked like a charm. Just one issue can I make the white background of the menu go all the way across the page once the scroll comes into effect. At the moment it leaves a gap on the right.

Also need to move the logo down / right on mobile

Appreciate your help – and apologies for the time difference 🙂

[scrambler]

Was the menu bar full width when fixed before the CSS?

If so, can you remove the CSS and post back

1- I noticed a problem on your menu.

You seem to have selected the full width option in two different places which causes a conflict.

You have selected alignfull for the menu align option, and you have also checked a full width option in the Main options Full width page. Remove all full width options in the Main Options > Full width page for the menu, leaving just the alignfull property in its align option

 

2- Also, You messed up the CSS I gave you… You are missing a closing curly bracket at the end of the @media rule.

you have

@media and {max-width:930px){#nav-primary {top:130px;}

instead of

@media and {max-width:930px){#nav-primary {top:130px;}}

3- To move the Logo, you can use the following rules to adjust the margins (currently at 1% 1%).

To only affect mobile

.is-mobile .custom-logo-link {margin-top:2%;margin-left:5%;}

or for general

.custom-logo-link {margin-top:2%;margin-left:5%;}

 

[dnadesign]

Thanks Scrambler – You’re the best.

Just for interest – I can untick the extend Primary menu background but once saved it reverts to being ticked again. I had the menu aligned as Full width items center – but changed it to center and it did the job.

[scrambler]

@dnadesign

Not quite, you still have a syntax error in the CSS, one from me and one from you  🙂

So the @media rule is not working and the menu collides as the browser gets smaller

You have a curly bracket instead of a parenthesis in the mx-width and I missed the min-width. You have

@media and {max-width:930px){#nav-primary {top:130px;}}

instead of

@media (min-width:768px) and (max-width:930px){#nav-primary {top:130px;}}

Once corrected, the menu should drop down when you reduce the browser below 930px wide, and the hamburger menu will be more at the top,

BUT next you need to get rid of the extra space at the top by doing the following

.is-mobile .custom-logo-link {margin-top:10%;margin-left:10%;}
should become
.is-mobile .custom-logo-link {margin-top:2%;margin-left:10%;}

and
.is-mobile #nav-header-mini {clear:none;margin-top:60px;}
Should become
.is-mobile #nav-header-mini {clear:none;margin-top: 2%;}

That should make everything more compact on mobile

[dnadesign]

Thanks again Scrambler – Just changed the .is-mobile .custom-logo-link {margin-top:2%;margin-left:10%;} to {margin-top:10% – As the logo was hidden under the woocommerce store notice.

It would be nice if the header mini menu could be moved up on mobile..

I’ve also noticed the links in the header mini menu doesn’t work on desktop – but it works on mobile. Could you perhaps assist with helping me fix that?

[scrambler]

The mini menu is under the menu. Add the rule below to make it clickable
#branding {z-index:3000;}

Now the Logo only needs 10% top margin when the banner becomes two lines which is under 510px, and then the mini menu is too low because it drop under the logo due to the right margin on it.
To fix it all the modifications below should do it

Replace
.is-mobile .custom-logo-link {margin-top:10%;margin-left:5%;}
by

.is-mobile .custom-logo-link {margin-top:2%;margin-left:5%;}
@media (max-width:510px){
.custom-logo-link {margin-top:10% !important;}
#nav-header-mini {margin-top: 10% !important;}
}
@media (max-width:460px){
.custom-logo-link {margin-right:0% !important;}
}

Watch the CSS syntax and brackets!

We are reaching the end of responsiveness with that design. The whole thing would probably have been easier to manage and more responsive if the Logo was added to the menu bar instead of the header, and the mini menu done with a Plus Extra menu shortcode placed in the Menu Right HTML box.
To keep in mind for the future 🙂

[dnadesign]

Thanks Scrambler, Hoping I got all the )} right! Copy pasted instead of making any mistakes. I hear you wrt the edge of responsiveness as the mini header is still low on small apple phones. I have seriously learnt a lot from this though and I’m grateful for that

[scrambler]

To make the icons drop you have to get under 400px wide, that is a seriously small phone….
The rule below will adjust the height on screen under 400px.
-25% works if there is space fr both logo and icons on the same line, if not you will have to use a smaller number so it stays below the image.

@media (max-width:400px){#nav-header-mini {margin-top: -25% !important;}}

Also, you should redo your logo as a png file with transparent background instead of white, so it does not partially hide the menu item at some screen size

[dnadesign]

Scramber, As always you are a star!! Many thanks

[dnadesign]

Oh Jeez – Sorry Scrambler the #branding {z-index:3000;} fixed the navigation in the mini menu but now my primary menu is not clickable, Can you help me again? – Let me know if you would prefer I put the logo and mini menu into the primary menu

[scrambler]

As i said this is becoming way too complicated…
Here is one more band aid for what is definitely the wrong way to organize this header…

Remove the branding rule with the Z-index
add the following

#nav-primary {right:50%;}
.wvrx-menu-container {position:relative;right:-50%;}
#nav-primary .wvrx-menu-container {max-width:700px !important;}

And we also miss the white BG on mobile, so add
.is-mobile .menu-primary .wvrx-menu-container ul {background:white;}

[dnadesign]

Nope – Now the menu wraps and the mini header has no Nav – happy to put the logo and mini menu short code in the menu – Actually tried it this  afternoon but the css was messed up. Let me know if I must rip off the band aid and start from scratch. But I’ll need you on my side. Thanks Scramber

[scrambler]

Yes, we need to rip the band aid

I assume you have Plus.

Remove all the CSS we discussed

Set the custom logo to hide on all devices in the header in
Customizing ▸ Visibility > Header Area > Hide site logo

Add the Custom logo to the menu bar in
Customizing ▸ Layout > Menus > Add Site logo to left

Add your mini menu using an Extra Menu Shortcode with the right options placed in the Primary menu Right HTML box in
Customizing ▸ Added Content (HTML Areas…) > Menus > Right HTML

And we can start form there

[Author]

Posts