How do I make a sticky menu that matches my Art Store Fronts shop?

[MaryAhern]

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/

[Weaver]

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.

[scrambler]

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)

[MaryAhern]

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

 

[scrambler]

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

[MaryAhern]

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

 

 

[scrambler]

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?

 

[MaryAhern]

Here’s a screenshot of my set-up.

Hope this helps.

…mary

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

[scrambler]

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

[scrambler]

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.

[MaryAhern]

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

 

[MaryAhern]

This reply has been marked as private.

[scrambler]

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?

[MaryAhern]

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

[scrambler]

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)

 

[scrambler]

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

[Author]

Posts