Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 25, 2017 at 5:55 pm #868855
    kona123

    Hello,

    I have some custom CSS that floats my header down and page body up, but I would like to unstick my header on a certain page but keep it floated down. Is there an easy way to do this?

    Thanks!

    Boy Scout Resident Camp

    October 25, 2017 at 7:37 pm #868913
    Yigit

    Hey,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    .page-id-177 #header {
    position: fixed!important;
}

    Best regards,
    Yigit

    October 25, 2017 at 10:16 pm #868967
    kona123

    Hi Yigit,

    Thanks for the response. That seems to be what it is set to now. I added the following, and it did work, however pushes the main content back down.

    .page-id-177 #header {
    position: relative!important;
}

    Any thoughts on moving the content back up? The code used to achieve the floated menu bar sitewide is as follows, which may or may not be the best way of going about it, but best I knew how.

    /* Float the header down */
.html_header_top.html_header_sticky #header {
     margin-top: 50px;
}

/* Make upper menu transparent */
#header_meta {
     background: none;
}

/* Make menu background smaller */
.header_bg {
    height: 50px;
    margin-top: 30px;
}

/* Move the body up */
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}

/* Align the menu best we can */
.main_menu {
        margin-right: 230px;
        text-align: center;
}

    Thanks!

    • This reply was modified 7 years, 2 months ago by kona123.
    October 25, 2017 at 10:56 pm #868986
    Jordan Shannon

    Hi,

    I’m not seeing an issue of the main content being pushed down, but perhaps I’m looking in the wrong area. Can you provide a screenshot?
    Best regards,
    Jordan Shannon

    October 25, 2017 at 11:58 pm #869014
    kona123

    Hi,

    Sorry for not explaining clearly. It’s more a matter of how I have styled the rest of the site, with the topbar being ‘transparent’. See screenshot of another page vs. page with relative header.

    Example of page where header is sticky as well as floated down a bit as desired.
    http://www.tvsrbsa.org/wp-content/uploads/2017/10/Screen-Shot-2017-10-25-at-5.57.32-PM.png

    Trying to achieve same look but with non-sticky header
    http://www.tvsrbsa.org/wp-content/uploads/2017/10/Screen-Shot-2017-10-25-at-5.53.27-PM.png

    • This reply was modified 7 years, 2 months ago by kona123.
    October 26, 2017 at 8:19 am #869132
    kona123

    Figured it out :) Needed to use Absolute, not relative.

    Took a little fiddling to get the full-width submenu to then stick to the top instead of being floated down, but, got it. Thanks for the direction

    October 27, 2017 at 7:58 am #869435
    Rikard

    Hi,

    Great, glad you found a solution and thanks for letting us know. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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