• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] how do I make the "site-top" area stick to the top when scrolling?

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › how do I make the "site-top" area stick to the top when scrolling?

  • This topic has 5 replies, 2 voices, and was last updated 6 years, 12 months ago by Davinder Singh Kanith.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 9, 2015 at 5:18 pm #413
    radiantaction
    Participant

    Hi there,
    I’m trying to get the top area with the “site-top” class stick to the top. Can anyone point me in the right direction for this?

    site url > http://dev5.khtestsite.com

    I see there was a similar question posted but the resolution wasn’t listed.

    Thank you!

    Kirsten

    July 9, 2015 at 5:35 pm #414
    Davinder Singh Kanith
    Moderator

    Try this

    Replace following code in style.css file

    .site-top {
        background: #fff;
        border-bottom: 1px solid #e3e3e3;
        color: #444;
        display: table;
        font-size: 14px;
        font-family: "Roboto", sans-serif;
        width: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        vertical-align: middle;
    }

    with this code

    .site-top {
        background: #fff;
        border-bottom: 1px solid #e3e3e3;
        color: #444;
        display: table;
        font-size: 14px;
        font-family: "Roboto", sans-serif;
        width: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        vertical-align: middle;
        position: fixed;
        top: 0;
        z-index: 999;
    }
    July 9, 2015 at 6:22 pm #415
    radiantaction
    Participant

    Thank you Davinder! That worked for the most part. However, now I’m having problems with header placement as a result. The header it getting cut off on the top. I added the following to my css file:

    .site-header {
    margin-top: 15px;
    }

    This fixed the issue in safari and firefox but created too much upper white space in chrome.

    I also tried adding “clear: both;” to .site-top to not avail.

    Any advice on how to fix this? I’ve tried google and various suggestions but I can’t seem to get it resolved.

    Thank you!
    Kirsten

    July 9, 2015 at 6:43 pm #416
    Davinder Singh Kanith
    Moderator

    Hi Kristen

    Just checked your site in Gooogle Chrome. The header logo area is looking fine, no extra space. Can you delete internet history and check again.

    July 9, 2015 at 6:50 pm #417
    radiantaction
    Participant

    Hi Davinder,
    Good grief I can’t believe I didn’t think of that. The cache was the problem. Thank you for all your help!

    Kirsten

    July 9, 2015 at 6:51 pm #418
    Davinder Singh Kanith
    Moderator

    Welcome Kirsten.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates