Magazine Pro – Scroll Stop for After Header Menu

[MikeB2]

I need the After Header menu to become fixed at the top of the page after scrolling a fixed number of pixels, and having the page content scroll under it. I have done this with other themes (from other theme cos) but can't seem to get the right combination of code for Magazine Pro. There is an article out there about doing this for the Sample theme, but it only partially works for Magazine Pro.

[Victor Font]

Post a link to the site please.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[MikeB2]

https://webdesignwp.com/

[Victor Font]

There are quite a few components to this.

Neither your header or after header menu are fixed positions, which means they scroll with the page right now. To make any HTML element stay in place and have the content move under it, its highest level element has to have position: fixed; and the width changed to 100% in CSS. You may also have to adjust the element's z-index so it remains the topmost layer.

The moment you apply that code to your menu, it will stay exactly where it is on the screen or jump back down to its original relative position. As you scroll your content, you'll have a large gap above the menu where the header was position. You're essentially splitting your page content above and below the menu. This means you also have to use -172px as the negative top margin instead of the -106px you have now.

The scrolling aspect after a fixed number of pixels is handled through jQuery. With jQuery you monitor the window scroll, and when it moves the number of pixels you want, you apply the new class to the element.

This code is available in other Studio Press themes if you have access. You can just copy the code from one theme, adjust it for your purposes, and use it in yours.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[MikeB2]

Thanks for the reply. Yes, I know my header and After Header menu aren't fixed. What I'm looking for is the header to scroll up and then have the menu become fixed at the top of the page. I have done this with other themes using jquery and css (See https://www.gonzowebdesign.com/ ). So far, Magazine Pro has resisted my efforts and my code. It hadn't occurred to me that the negative margin could be the culprit. I try to avoid negative margins whenever possible because they can cause issues.

Please advise which other StudioPress themes accomplish what I want to do. I'll just buy one of these themes that has the menu scroll stop built in. If it were up to me I would just fix the nav menu to the top of the page. My client's design calls for the scrolling menu. Other than the menu issue Magazine Pro does what I need to do.

Thanks again for the information.

[MikeB2]

I found a plugin that does what I need to do with the nav menu. The myStickymenu plugin handles what Magazine Pro resisted doing, it pins the nav menu to the top of the page while scrolling. You can style the plugin from within myStickymenu's settings tabs.

https://wordpress.org/plugins/mystickymenu/

I would much rather handle this with a few lines of code instead of having to use a plugin to do something which should be simple.

https://webdesignwp.com/

If anyone knows which Genesis child themes handle this within the theme code, please let me know.

[Author]

Posts