Copy the fixed menu of Cafe themes

[giavara]

Hi!
i like the menu of cafe themes.

I would add the same feature in the genesis -standard- theme.
So when I scroll the page the menu is fixed on the top with the logo at the left.

Is possibile? How?

Thanks!!

[Tonya]

Hi,

It occurs via a combination of jQuery (in global.js) and CSS (in style.css). When the page scrolls to a certain position, the jQuery adds a class, "fixed", to the primary navbar. In the style.css file (stylesheet), you can search for .nav-primary.fixed and you'll find the following entries:

.nav-primary.fixed {
	position: fixed;
	top: 0;
}

A fixed position that is set to top 0px means it sticks (stays fixed) to the top of the screen. There's a bit more styling in there too that you'll need to grab.

Using either Chrome Dev Tools or Firefox Firebug, you can view the HTML, CSS, and JS to see how it all works together. See how the first li HTML element in the primary navbar is called "small-site-title". This is the small logo you see that appears on the left side of the screen. Looking again in the style.css file, you will find how the opacity is transitioned when .fixed is applied or how it is hidden when it is not applied.

Again you can view all of the files via Chrome Dev Tools, or simply purchase the Cafe child theme to gain full access. From there, you can implement the functionality into your child theme.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[giavara]

Thank you!

I copied the global.js from cafe theme
modify the function.php
and add the css in style.css

All works!

[Tonya]

Excellent! You are very welcome.

Please help us out and mark this is a "Resolved", when you get a moment. Have a wonderful day,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[AGwebstudio]

Hello!

Giavara, please, could you give more details? I am trying to fix menu in Outreach Pro but cannot find the way. Already I copy global.js from cafe theme but what i have to change in function.php and style.css?

Thank you very much in advance!!

[AGwebstudio]

No one here?

[AGwebstudio]

Hello, what´s happens with this forum? is death? 🙁

[Author]

Posts