Sticky Navigation in Modern portfolio theme

Community Forums Forums Design Tips and Tricks Sticky Navigation in Modern portfolio theme

This topic is: not resolved

Tagged: 

This topic contains 11 replies, has 5 voices, and was last updated by  Stephanie 10 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #21203

    chikamiku
    Participant
    Post count: 77

    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

    #21375

    cehwitham
    Participant
    Post count: 396

    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

    #21455

    chikamiku
    Participant
    Post count: 77

    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

    #21462

    cehwitham
    Participant
    Post count: 396

    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

    #21673

    chikamiku
    Participant
    Post count: 77

    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

    #21725

    cehwitham
    Participant
    Post count: 396

    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

    #21897

    TravisPri
    Participant
    Post count: 29

    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?

    #21918

    Sridhar Katakam
    Participant
    Post count: 1068

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

    and this in style.css:

    [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;
    }
    [/css]

    That’s it!


    #21926

    cehwitham
    Participant
    Post count: 396

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


    Twitter: cehwitham Web: cehwitham.com

    #21991

    chikamiku
    Participant
    Post count: 77

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

     

    All the best,

    #21997

    cehwitham
    Participant
    Post count: 396

    Glad it’s sorted.


    Twitter: cehwitham Web: cehwitham.com

    #87141

    Stephanie
    Participant
    Post count: 2

    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

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

You must be logged in to reply to this topic.