• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Modern Portfolio sticky header

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Modern Portfolio sticky header

This topic is: not resolved

Tagged: modern portfolio, sticky header

  • This topic has 3 replies, 2 voices, and was last updated 11 years, 5 months ago by chillybin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 31, 2014 at 9:40 pm #87986
    Stephanie
    Member

    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/
    January 31, 2014 at 10:19 pm #87987
    chillybin
    Member

    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

    February 1, 2014 at 4:07 pm #88058
    Stephanie
    Member

    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

    February 2, 2014 at 1:26 am #88122
    chillybin
    Member

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble