WordPress.org

Ready to get started?Download WordPress

Forums

Make theme and top header Fixed and only body scroll (6 posts)

  1. brittanylynn01
    Member
    Posted 1 year ago #

    Hello, I am trying to code in my child theme so that the header and the top navigation bar are fixed and only the body scrolls. I've tried looking through the forums but I can't get anything to work.

    thanks in advance

  2. carolemagouirk
    Member
    Posted 1 year ago #

    add position:fixed to the css of the header.

    If you post your code, I'll show you where to put position:fixed, if you aren't sure.

  3. brittanylynn01
    Member
    Posted 1 year ago #

    Thanks! that worked however it moved the header from where it was originally here is my site:

    http://www.fillyshred.com/install/

    and this is what I had in the code
    /***************header************************/
    #header {
    position:fixed
    }

  4. carolemagouirk
    Member
    Posted 1 year ago #

    #navigation{position:fixed;z-index:1}
    #navigation-frill{position:fixed;z-index:2;margin-top:25px}

    That looks good to me.

  5. brittanylynn01
    Member
    Posted 1 year ago #

    okay I added those code and it made the the navigation finally stay fixed but the header is now moved up and is cut off and it is not fixed. I also cannot get the about, contact, etc to move over to the left so the contact page is not overlapping the search tab this is the code I have for all of those. I tried using the tool on firefox to make edits but I am not super knowledge and I am just learning. Those are the only major changes I wanted to make to the template.

    Thank you for your patience. This is the code I have attempted to fix all those problems
    /***************header************************/

    #navigation{position:fixed;z-index:1}
    #navigation-frill{position:fixed;z-index:2;margin-top:25px}

    /***************navbar************************/

    #nav-menu {
    display: block;
    float: left;
    position: fixed;
    font-family: Arvo,Cambria,Georgia,Times,serif;
    font-size: 14px;
    margin: -4px 0px 4px -16px;
    width: 600px;

    }

    #navigation{position:fixed;z-index:1}
    #navigation-frill{position:fixed;z-index:2;margin-top:25px}

    #wrapper {
    text-align: left;
    width: 750;

  6. carolemagouirk
    Member
    Posted 1 year ago #

    Sorry, I'd like to help, but your template is giving me a headache. Also, I should be getting back to work.

    Remove the width from #nav-menu and set the width for .wrapper to be more than 690px.

Topic Closed

This topic has been closed to new replies.

About this Topic