Modern Portfolio sticky header

Community Forums Forums General Discussion Modern Portfolio sticky header

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  chillybin 8 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #87986

    Stephanie
    Participant
    Post count: 2

    I have been trying to make the header on the Modern Portfolio theme a sticky header so it remains at the top even if you scroll down.

    I have used code snippets from several different threads in the forums and online and I can not seem to get this to work properly.

    Here is my test site http://demo.ebizelephant.com/ModernPortfolio/

    It should stretch all the way across the top and not hide the areas below.

    Thank you for any help!


    Stephanie Hellwig
    http://www.eBizElephant.com

    http://demo.ebizelephant.com/ModernPortfolio/
    #87987

    chillybin
    Participant
    Post count: 81

    You can change your #header CSS and add max-width: 100%;

    #header {
    background: url(images/bg.png) repeat-x scroll 0 0 #fff;
    margin: 0 auto;
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;
    
    }

    You then will have to add a margin to this

    .mp-home #inner {
    margin-top: 152px;
    }

    We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

    #88058

    Stephanie
    Participant
    Post count: 2

    Thanks! That fixed the header issue. Now there is a padding or margin issue because if you click on any of the menu items the header hides part of that section.

    Thank you very much for your help ;)


    Stephanie Hellwig
    http://www.eBizElephant.com

    #88122

    chillybin
    Participant
    Post count: 81

    Ok, then you can remove this

    .mp-home #inner {
    margin-top: 152px;
    }

    as you already have a 90px margin in #inner

    You could also add some padding at the top of your #about section in CSS

    Or you could alter your /modern-portfolio/js/scroll.js file

    jQuery(function( $ ){
        $.localScroll({
        	duration: 750,
    	offset: { top: -100 }
        });
    });

    We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.