Home › Forums › Weaver Xtreme Theme › Menu alignment with fixed to top on scroll
- This topic has 22 replies, 2 voices, and was last updated 1 year, 4 months ago by
dnadesign.
-
AuthorPosts
-
February 11, 2021 at 13:12 UTC - Views: 72 #67322
dnadesign
ParticipantHi 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 ###
February 11, 2021 at 17:11 UTC - Views: 72 #67323scrambler
ModeratorThe 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?
February 11, 2021 at 17:35 UTC - Views: 81 #67324scrambler
ModeratorIf 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
February 12, 2021 at 06:53 UTC - Views: 68 #67328dnadesign
ParticipantThanks 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 🙂
February 12, 2021 at 17:47 UTC - Views: 66 #67333scrambler
ModeratorWas the menu bar full width when fixed before the CSS?If so, can you remove the CSS and post back1- 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%;}
February 15, 2021 at 13:53 UTC - Views: 52 #67350dnadesign
ParticipantThanks 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.
February 15, 2021 at 17:22 UTC - Views: 58 #67353scrambler
ModeratorNot 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
February 16, 2021 at 06:12 UTC - Views: 59 #67357dnadesign
ParticipantThanks 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?
February 16, 2021 at 17:43 UTC - Views: 58 #67360scrambler
ModeratorThe 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 itReplace
.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 🙂February 17, 2021 at 06:28 UTC - Views: 34 #67364dnadesign
ParticipantThanks 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
February 17, 2021 at 17:38 UTC - Views: 39 #67365scrambler
ModeratorTo 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
February 18, 2021 at 04:49 UTC - Views: 28 #67375dnadesign
ParticipantScramber, As always you are a star!! Many thanks
February 18, 2021 at 12:26 UTC - Views: 26 #67376dnadesign
ParticipantOh 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
February 18, 2021 at 17:41 UTC - Views: 27 #67379scrambler
ModeratorAs 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;}February 18, 2021 at 18:47 UTC - Views: 22 #67381dnadesign
ParticipantNope – 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
February 18, 2021 at 19:14 UTC - Views: 27 #67383scrambler
ModeratorYes, 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 logoAdd the Custom logo to the menu bar in
Customizing â–¸ Layout > Menus > Add Site logo to leftAdd 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 HTMLAnd we can start form there
-
AuthorPosts
- You must be logged in to reply to this topic.