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

Topic Resolution: Resolved
Viewing 16 posts - 1 through 16 (of 23 total)
  • Author
    Posts
  • #67322
    dnadesign
    Participant

    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 ###

    #67323
    scrambler
    Moderator

    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?

    #67324
    scrambler
    Moderator

    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

    #67328
    dnadesign
    Participant

    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 🙂

    #67333
    scrambler
    Moderator

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

     

    #67350
    dnadesign
    Participant

    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.

    #67353
    scrambler
    Moderator

    @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

    #67357
    dnadesign
    Participant

    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?

    #67360
    scrambler
    Moderator

    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 🙂

    #67364
    dnadesign
    Participant

    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

    #67365
    scrambler
    Moderator

    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

    #67375
    dnadesign
    Participant

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

    #67376
    dnadesign
    Participant

    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

    #67379
    scrambler
    Moderator

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

    #67381
    dnadesign
    Participant

    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

    #67383
    scrambler
    Moderator

    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

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