how to make portfolio header stay fixed to top

[DigitalSuit]

Hello
I'm trying to make the header stay at the top of the page,
meaning to make stay while I scroll down
I tried a couple of things that I saw on other threads but none of them works.
help anyone ?

thanks

http://www.bengo.co.il

[Jason Weber]

Custom CSS or in your /wp-content/themes/modern-portfolio-pro/style.css at the bottom:

/* Sticky header */

.site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
}

nav.nav-primary {
    padding-top: 164px; /* height of header (can be easily obtained using Chrome Inspector or Firefox Firebug) */
}

---

Webby’s WebPrezence
National Center For Due Process

[DigitalSuit]

Thanks Jason
Unfortunately its not working
I have few classes which I suspect
1st suspect - the "Site Header" section in the CSS, but every time I add the "Position: fixed;" it messes up the header completely
2nd suspect - the " Float Clearing" section, but again its not fixing it
Site Header
---------------------------------------------------------------------------------------------------- */
.site-header .wrap {
border-bottom: 1px solid #222;
overflow: hidden;
padding: 1px 0;
font-weight: 700;
font-size: 20px;
}

.mpp-home .site-header .wrap {
border: none;
}
/* Float Clearing
--------------------------------------------- */
.author-box:before,
.clearfix:before,
.entry-content:before,
.entry:before,
.footer-widgets:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.widget:before,
.wrap:before {
content: " ";
display: table;
}

.author-box:after,
.clearfix:after,
.entry-content:after,
.entry:after,
.footer-widgets:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.widget:after,
.wrap:after {
clear: both;
content: " ";
display: table;
}

[Jason Weber]

I don't see the snippet in your CSS.

Anyway, the more recommended way is to download Simple Custom CSS, activate the plugin, and put that snippet in there.

That will take precedent over anything in your child theme's stylesheet, and you won't have to worry about altering your child theme's core files.

---

Webby’s WebPrezence
National Center For Due Process

[DigitalSuit]

I tried both ways, in the custom css and in the original css, both resulted in a strange outcome

[Author]

Posts