WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make a static header and sidebar scroll with the page (10 posts)

  1. imasharpone
    Member
    Posted 3 years ago #

    Hello all, I'm using the Valentine theme because the fonts, colors and overall look go fairly well with the content I'm posting. What I don't like however is that the header and sidebar are both fixed, as in the only part of the page that scrolls is my posts (or page info). I would like the header and sidebar(s) to scroll with the rest of the page. It would seem like a simple bit of reworking the html code could fix this but I'm at a loss as to how to accomplish this.

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    What's the URL?

  3. imasharpone
    Member
    Posted 3 years ago #

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    OK, let me get you started. The theme uses several "fixed" div positions which makes them "static" in your theme.

    /*.header position from position: fixed; to: */
    .header {
        position: absolute;
    }
    /*.widgetsbar position from position: fixed; to: */
    .widgetbar {
        position: absolute;
      /*height: 90%; Remove this*/
    }
    /*.sc_menu_wrapper position from position: fixed; to: */
    .sc_menu_wrapper {
        position: absolute;
    }
    /*.footer you can leave this as is */
    .footer {
        position: fixed;
    }

    This will definitely be good start, now please note that the design will not be 100% identical, but very close. Sidebar fixed to absolute will be slightly lowered, but nothing major.

    Emil

    PS Change that in:
    http://imasharpone.com/wp-content/themes/valentine/style.css

  5. imasharpone
    Member
    Posted 3 years ago #

    Emil, you rock. That worked. The sc_menuwrapper was already set to absolute. The left sidebar is still fixed though. But I actually want to get rid of the left sidebar anyway. Where do I find that part so I can remove it?

    Thanks for your help.

  6. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    No problem. As far as the left sidebar you can add display: none.

    div.sc_menu_wrapper {
        display: none;
    }

    And the menu will be gone. Usually this can be removed from the theme pages itself, however the author made this in unusual way via header.php file. If you don't want to go with php code editing, simply add display: none to the div in your stylesheet.

    And to remove this completely from your code, open header.php and delete:

    <?php
    if ( is_page() ) {
        echo '<h2 class="submnu">Submenu</h2>';
    } else {
       echo '<h2 class="submnu">Categories</h2>';
    }
    ?>
    <div class="sc_menu_wrapper">
      <div class="sc_menu">
    <ul id="sliding-navigation">
    <?php
    if ( is_page() ) {
        echo $children;
    } else {
       wp_list_categories('title_li=');
    }
    ?>

    That's all.

  7. imasharpone
    Member
    Posted 3 years ago #

    Perfect! Thanks so much, Emil. Rather than remove the left sidebar I just set it to absolute like the right sidebar. I'd like to figure out how to put some widgets in that space (left sidebar). I think that is straying a bit from my original question though. Should I start a new thread about setting that up or can you answer that here?

  8. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

  9. imasharpone
    Member
    Posted 3 years ago #

    I like it. Does that mean I need to change to that flexibilitytheme? Seems like it might be quite a bit of work to make that theme appear like the one I've got, but the main reasons I used that theme were the colors and fonts they chose. Perhaps I'd be better off switching to a more flexible theme and using those colors and fonts that I like. I'm assuming the fonts in free themes are free for use under gpl license.

  10. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    No, just drag and drop whatever you want to appear in your sidebar, simple stuff really. Theme does support widgets I believe.

    So if I want search widget in my sidebar I would just drag and drop:
    http://imgur.com/pJSuM

Topic Closed

This topic has been closed to new replies.

About this Topic