add sticky / fixed menu to ExecPro (like MinPro)

[ronsplace]

How can I make the Executive Pro .site-header fixed (sticky?) like Minimum Pro?

If I add .site-header {position: relative; } the menu flies off to the right (or left depending what I hack 🙂 ).

Help appreciated !!

[Brad Dalton]

Site header or site menu?

Try

.site-header {
position: fixed; 
}

---

Tutorials for StudioPress Themes.

[ronsplace]

Thanks Brad, I meant "fixed" 🙂 (I will not work late at night, I will not work late at night, I will not work late at night ...)

So, I haven't completely fixed the menu yet ... I just removed the "float-right" for the time being.

So far my steps have been:

1) add padding-top to .site-inner: (original CSS is tabbed, my additions / edits are non-tabbed)
.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #f2f2f2; (changed this from #fff so a white line doesn't show on the left of my logo)
clear: both;
margin: 0 auto;
overflow: hidden;
padding-top: 100px;
padding-top: 10rem;
}

2)
.site-header {
background-color: #f2f2f2;
margin: 0 auto;
min-height: 100px;
width: 100%;
position: fixed;
z-index: 999;
}

3) change / add color f2f2f2 to :
.title-area {

4) remove float: right; in /* Site Header Navigation:
.site-header .genesis-nav-menu {
/* float: right; */
width: auto;
}

and it looks quite good I think... maybe not quite as nice as Minimum Pro ... but ...

by the time you read this it should be live at ronis-schluessel.de

(and now I see that the logo doesn't center on small screens, sigh ...)

[Regina Smola]

Hey Ron,

Looks like you're missing the max-width, which is causing it to spread across the page.

I got it to work on the new Executive Pro theme with the following:

.site-header {
margin: 0 auto;
min-height: 100px;
width: 100%;
position: fixed;
z-index: 999;
max-width:1140px;
background-color: #f2f2f2;
border-bottom: 1px solid #eee;
}

.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #f2f2f2;
clear: both;
margin: 0 auto;
overflow: hidden;
padding-top: 100px;
padding-top: 10rem;
}

I did not touch any floats.

Hope that helps.

---

~ Regina Smola
http://www.wpsecuritylock.com

[ronsplace]

Hi Regina,

for me that only fixes my float-right problem on a wide screen ...

[Chrissy Marquardt]

This reply has been marked as private.

[Author]

Posts