WordPress.org

Ready to get started?Download WordPress

Forums

Quark
Very nice! (9 posts)

5 stars
  1. krystinealaina
    Member
    Posted 1 year ago #

    Great Responsive theme. Customizable, easy to read, and just enough options.

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Thanks krystinealaina. I'm glad you like it :-)

  3. krystinealaina
    Member
    Posted 1 year ago #

    Quick question! Is there a way to lock the header (with header image and menu) in place and have the rest of the page scroll under it as the user views a page?

  4. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    There's no option "straight out of the box" for achieving that effect, but it's not hard to add. You'd need to add the following styles to #headercontainer

    position: fixed;
    top: 0;
    z-index: 10;

    and change the following style on #bannercontainer

    margin-top: 110px;

    Within your style.css file. You'd probably want to add a background colour to your #headercontainer as well, so that you can see it properly when other content is scrolling below it.

  5. krystinealaina
    Member
    Posted 1 year ago #

    THANK YOU!!!!! Worked perfectly! I even added a bottom border so the header is visibly divided from the content as you scroll. Awesome! Loving this theme even more. Check out my website in a few days to see your work in use! Thanks again!

    http://www.krystinealainastyle.com

  6. krystinealaina
    Member
    Posted 1 year ago #

    Sorry; one more question! Now that the header is locked in place, I notice that because the theme is responsive, it is locked on my mobile device as well and completely covers the content. I want to keep the header locked for desktop but not for mobile. Any way to circumvent??

  7. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Hi Krystine,

    You'll just need to adjust the media queries, which are located toward the bottom of style.css.

    You'll see one that says '@media only screen and (max-width: 800px)'. Within this media query, just add:

    #headercontainer {
       position: inherit;
    }
    #bannercontainer {
       margin-top: 10px;
    }

    So basically, all you're doing here is changing them back to what they were originally, once the screen hits a certain size.

  8. krystinealaina
    Member
    Posted 1 year ago #

    You are fantastic. Thank you again!!! Seriously, do you have a donation site?? I feel like I owe you. Haha. Thank you thank you thank you! My site is live now so check it out! ;-)

  9. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Thanks Krystine. Your site looks great. Glad you've got everything sorted :-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.