Home Forums Weaver Xtreme Theme How do I make a sticky menu that matches my Art Store Fronts shop?

Viewing 16 posts - 1 through 16 (of 51 total)
  • Author
    Posts
  • #66170
    MaryAhern
    Participant

    I’m trying to figure out how to match my self hosted site to a feature on my shop that is hosted by Art Store Fronts.

    I’d like the Menu and the logo to remain at the top of the page when I scroll down using my Weaver Xtreme Plus.

    Thanks!

    …mary

    My website: https://maryahernartist.com/

    My Art Storefronts website: https://shop.maryahernartist.com/

    #66171
    Weaver
    Keymaster

    I don’t know of a way to match exactly. You can select an option that will make the menu stick at the top (but not fade in like the commercial site). (Customizer->Layout->Fix to Top on Scroll)

    And built-in to Weaver Xtreme, the logo is either shown on the left or not.

    It might be possible to define some CSS to have the logo on the left menu hidden until it sticks at the top, and by then the main header logo would be hidden. But @scrambler might be able to figure that one out.

    #66172
    scrambler
    Moderator

    We should be able to get pretty close after some tuning

    • Add Your header image as the site logo in
      Customizing > General Options & Admin > Site Identity > Logo
    • In Main Options > Menus > Primary menu bar > Fixed-top-menu > Select Fix to Top on Scroll
    • Check Main Options > Menus > Primary menu bar > Add Site Logo to Top
    • Set You menu background color to rgba(255,255,255,0)

    Then Insert the rules below to the Theme Global Custom CSS Rule box, and post back with any issue leaving the rules in place

    #header-widget-area {position:fixed;width:100%;left:0;top:0;}
    #branding {z-index:2010;}

    /* Rule to define speed and start top property */
    .wvrx-menu-container {transition:top .3s ease;top:-50px;}

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

    /* Rule to set the transition speed for both background and padding */
    .wvrx-menu-container {
    transition: background-color .5s ease, padding .5s ease;
    }
    /* Rule to change the background color and padding once the menu is fixed */
    .wvrx-menu-container.wvrx-fixonscroll {
    background-color:rgba(255,255,255,1);
    padding-top:60px;padding-bottom:10px;
    }

    The above CSS for the menu animation is detailed in the guide article below

    “Fixed to Top on Scroll” Menus: Customization – Weaver Xtreme Guide (weavertheme.com)

    #66193
    MaryAhern
    Participant

    I tried to follow your instructions and here’s what I’ve found.

    I now have two logos saying “Mary Ahern Artist”. (Corrected this problem by deleting the header image but both still show on my desktop, tablet & iPhone. The logo isn’t centered. The header image is)

    The menu is at the top of both logos but what is scrolling on top is not the menu but a “Free Shipping Announcement”.

    We’re getting there I think.

    I left the code that was already in the Global CSS box & pasted yours below it.

    Looking forward to your next fix!

    …mary

     

    #66195
    scrambler
    Moderator

    Duplicate image is because you need to hide the default logo image in
    Main options > Header > Custom Logo > Hide WP Custom Logo > Hide on all devices

    On your other site the menu is below the header image, on this one it is above, is that on purpose?
    If not, you need to uncheck “Move primary menu to the top” in the primary menu bar options

    You did not set the menu to fix on Scroll so none of the fix on scroll can work

    Main Options > Menus > Primary menu bar > Fixed-top-menu > Select Fix to Top on Scroll

    Post back when all is in done

    #66209
    MaryAhern
    Participant

    By hiding the

    “Main options > Header > Custom Logo > Hide WP Custom Logo > Hide on all devices” I now don’t have any logo.

    I unchecked the “Move primary menu to the top” and the menu is now again below where the logo would be.

    I selected “Main Options > Menus > Primary menu bar > Fixed-top-menu > Select Fix to Top on Scroll” but the item that scrolls is a message in the Header Widget Area.

    Please let me know what to do next.

    Thanks!

    …mary

     

     

    #66213
    scrambler
    Moderator

    I am afraid we are not communicating or something is up…

    First it looks like you removed your header image, you should have the header image set to you initial image, so that shows up above your menu like on your other site.

    Your menu is still not using the fixed to top on scroll.

    When you go to main Options > Menus > Primary menu bar > Fix top menu, do you actually see the option “fixed to top on scroll” being selected in the drop down list, or does it disappear after you set it and save?

    Is the option Add Site logo to left Checked?

     

    #66215
    MaryAhern
    Participant

    Here’s a screenshot of my set-up.

    Hope this helps.

    …mary

    https://1drv.ms/u/s!AtqjCG3cfn5yiEv54LIUm9wKmHB1?e=viA49w

    #66217
    scrambler
    Moderator

    Either something is broken, or you have a cache issue.

    Clear All your caches and check and post back.

    Also, try changing some other settings, like changing a Background color to red, and see if that shows up in your site

    #66218
    scrambler
    Moderator

    If clearing your caches does not make the menu fix on scroll below are two other things to check/try

    1- Are you using a plugin or a plugin option that does CSS/Javascript Optimization?
    If you do, deactivate the feature/plugin, as optimization will break the theme javascript and CSS

    2- If not, try deactivating ALL non weaver plugin, and test if the menu becomes fixed on scroll. If it does, reactivate one by one testing in between to find the culprit.

    #66220
    MaryAhern
    Participant

    I deactivated all my plug ins and the widget at the top of the page. The menu still isn’t sticky.  Please let me know if you have any success.

    Thanks! …mary

     

    #66221
    Private Reply
    MaryAhern
    Participant
    This reply has been marked as private.
    #66223
    scrambler
    Moderator

    Absolutely!, you should never have more than one setting page open at a time, or they will cancel each other 🙂

    So make sure you do NOT have the customizer open when going to Main Options >

    Menus> Primary menu bar > Fixed menu option and save it

    If that was not the issue (which I hope it was), I am at a loss of what is going on with your site.

    Can you paste the content of the system information box here (Xtreme Admin > Theme Help > System information box

    Also, do other options work, if you set the Primary menu bar background to red in Main options > Menus > Primary menu bar > BG box, and save, does it show up on the site?

    #66224
    MaryAhern
    Participant

    Also, do other options work, if you set the Primary menu bar background to red in Main options > Menus > Primary menu bar > BG box, and save, does it show up on the site?

    Yes they do. I set the menu bar to red & it changed so I set it back to white and it did that too.

    Can I re-activate all my plugins now?

    …mary

     
    <h3>Weaver System Info ###</h3>
    — WordPress Configuration —

    Site URL: https://maryahernartist.com/website
    Home URL: https://maryahernartist.com
    Multisite: No
    Version: 5.5.3
    Language: en_US
    WP_DEBUG: Disabled
    WP Memory Limit: 40M
    Permalink: /%postname%/
    Show On Front: page
    Page On Front: HOME (ID# 3869)
    Page For Posts: NEWS (ID# 72)
    Current Theme: Weaver Xtreme (4.4.0.1)
    Post Types: post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, oembed_cache, user_request, wp_block

    — Weaver Xtreme Configuration —

    Weaver Xtreme Version: 4.4.0.1
    Theme Support Version: 4.4.1
    Xtreme Plus Version: 4.0

    — Server Configuration —

    Operating System: Linux
    PHP Version: 7.3.23
    MySQL Version: 5.6.49
    jQuery Version: 1.12.4-wp
    Server Software: Apache/2.4.46 (Amazon) OpenSSL/1.0.2k-fips PHP/7.3.23

    — PHP Configuration —

    Local Memory Limit: 256M
    Server Memory Limit: 128M
    Post Max Size: M
    Upload Max Filesize: 40M
    Time Limit: 30
    Max Input Vars: 1000
    Display Errors: N/A

    — WordPress Active Plugins —

    Weaver II Theme Extras: 2.3.1
    Weaver Show Posts: 1.5.1
    Weaver Xtreme Plus: 4.0
    Weaver Xtreme Theme Support: 4.4.1

    — WordPress Inactive Plugins —

    AddToAny Share Buttons: 1.7.42
    Akismet Anti-Spam: 4.1.7
    Broken Link Checker: 1.11.15
    Classic Editor: 1.6
    Easy Theme and Plugin Upgrades: 2.0.1
    Featured Page Widget: 2.2
    Google Analytics for WordPress by MonsterInsights: 7.13.2
    iThemes Security: 7.9.0
    Jetpack by WordPress.com: 9.1
    Link Manager: 0.1-beta
    MailChimp Forms by MailMunch: 3.1.4
    NextGEN Gallery: 3.4.7
    NextGEN Pro: 3.1.2
    Really Simple SSL: 4.0.3
    Redirection: 4.9.2
    W3 Total Cache: 0.15.2
    Widget Shortcode: 0.3.5
    WP Edit: 4.0.4
    WPForms Lite: 1.6.3.1
    WP Mail SMTP: 2.5.1
    Yoast SEO: 15.3

    ### End System Info ###

    #66225
    scrambler
    Moderator

    Yes, you can, but I have no clue why some of the options you set like “fixed to top on scroll” are not working.

    I see in your list that you still have the Weaver II Theme Extras: 2.3.1 installed, that should not be there, please delete that plugin.

    If that does not fix the issue, remove all the Custom CSS I had given you and post back so I can have one more look at the site.

    Also, please put the text below in the primary menu Background color box

    rgba(255,255,255,0)

     

    #66226
    scrambler
    Moderator

    Also after doing what I mentioned in my post right above, if Fixed to top on scroll shows as selected in the options and is still not working, do the following.

    • Save your settings and download a copy locally for good measure from the SAve / Restore page
    • Switch to a different theme
    • Delete all weaver themes an plugins.
    • Reinstall the Xtreme Theme and the Xtreme Theme support Plugin form WordPress and activate
    • All settings should automatically be back
    • Check if the Fixed to top on scroll is still selected in the primary menu options.
    • Check if the menu is fixed.
    • Download a fresh copy of the plus plugin from your weaver account and reinstall and activate that
    • report back
Viewing 16 posts - 1 through 16 (of 51 total)
  • You must be logged in to reply to this topic.