Sticky Navigation in Modern portfolio theme

[chikamiku]

I am using modern portfolio, the newly introduced theme by studiopress.  Does anyone know how to make its top navigation sticky similar to the following.

Modern portfolio theme: http://demo.studiopress.com/modern-portfolio/

Reference Theme: http://happycog.com/#network

Just compare the two.  The reference theme has a sticky nav bar which is displayed all the time no matter which link you click on.

Thanks

[cehwitham]

I presume you want to make the header the fixed element. Try the folowing in style.css, change the #header styles on line 16 to:

#header {
position: fixed;
top: 0;
z-index: 1000;
background-color: #fff;
width: 100%;
margin: 0 auto;
}

Then change line 389 to:

.wrap, #inner {
margin: 0 auto;
max-width: 1080px;
}

Ie remove #header from having a max width set.

Let me know how that works.

---

Twitter: cehwitham Web: cehwitham.com

[chikamiku]

Chris,

Thank you for coming to my rescue.  It has been a huge help indeed. I implemented the code as you said. However, now the issue is that the whole header now is showing up while I scroll.  Is there a way to fix the navigation bar only as is the case with the following website?

http://happycog.com/.

 

In the case of happy Cog website, the logo and the wlecome blurb area do not show up while scrolling.

 

Thanks and regards

[cehwitham]

To do this I think I'd split the navigation out of the header, probably use primary nav and then add something like:

#nav {
position: fixed;
top: 0;
z-index: 1000;
background-color: #fff;
width: 100%;
margin: 0 auto;
}

---

Twitter: cehwitham Web: cehwitham.com

[chikamiku]

cehwitham,

 

Thank you again for this again. I am soooooooooo dumb on tech issues.  Now the next question for me is how to separate the header from the navigation. I think I need to take some basic html lessons.  In fact, I am not sure wher and what tweaks I have to make before the two  become separate.

 

Thanks and regards

[cehwitham]

If you just setup the primary navigation the navigation and the header will be separate, no need to be changing any HTML.

This tutorial might help you: http://en.support.wordpress.com/menus/

---

Twitter: cehwitham Web: cehwitham.com

[TravisPri]

Hi - just piggy-backing on this because I'm curious. To me it sounds like if you used this code then the nav would be fixed at the very top of the page. The Happy Cog site however has the nav a bit farther down, and only becomes fixed when it reaches the top of the page.. Any ideas on how to accomplish this?

[Sridhar Katakam]

Add this in functions.php: http://pastebin.com/S7zPkELU

and this in style.css:

/*********************************************
    Fixed Header
*********************************************/

#header.fix {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
	/*padding-top: 0;
	padding-bottom: 0;*/
	overflow: visible;
	background: rgba(255, 255, 255, 0.92);
}

.admin-bar #header.fix {
	top: 28px;
}

That's it!

---

Genesis Tutorials | Follow me on Twitter

[cehwitham]

Thanks Sridhar, I was just going to say you'll need to write some JavaScript.

---

Twitter: cehwitham Web: cehwitham.com

[chikamiku]

Thank you all for the amazing support. It was fantastic indeed. Now I know full well how to handle this issue.

 

All the best,

[cehwitham]

Glad it's sorted.

---

Twitter: cehwitham Web: cehwitham.com

[Stephanie]

I've been following this thread, and I have tried to also make the header area a sticky header on the modern portfolio theme. I am trying it out on this demo site
http://demo.ebizelephant.com/ModernPortfolio/
I have been able to make it sticky, but it floats on top of the sections instead of being fixed to the top as you move down . . . you can visit the site to see what I mean.

I would like it to be fixed to the top like on http://vivalaviolette.com/ and https://www.waveapps.com/

Thanks in advance for any help 😉

---

Stephanie Hellwig
http://www.eBizElephant.com

[Author]

Posts