Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 24, 2017 at 8:56 pm #868398
    shoutcloudstudios

    I am trying to style the sticky nav bar but am having trouble finding a suitable class that works only when the page is scrolled and the top menu is in sticky mode.

    In Enfold 2017 is there a class that appears only when the header is in scrolling mode (browser scrolled down) and the top nav is sticky?

    October 24, 2017 at 11:38 pm #868448
    Jordan Shannon

    Hey shoutcloudstudios,

    Please provide a link to the site/page in question if possible.

    Best regards,
    Jordan Shannon

    October 24, 2017 at 11:44 pm #868454
    shoutcloudstudios

    What is happening here is I am trying to have a light colored header for all page except for the home page. For that I want a transparent header with a transparent sticky header.

    I managed to do it, but it’s a css hacking mess at best.

    October 24, 2017 at 11:52 pm #868463
    Jordan Shannon

    Hi,

    So if you’re trying to emulate that site, you’re saying you don’t want a background on the menu at all?

    Best regards,
    Jordan Shannon

    October 24, 2017 at 11:59 pm #868465
    shoutcloudstudios

    I actually like the opaque black background on the Enfold menu.

    To the question in my original post: In Enfold 2017 is there a css class that appears only when the header is in scrolling mode (browser scrolled down) and the top nav is sticky?

    October 25, 2017 at 12:08 am #868468
    shoutcloudstudios

    See screenshot: https://i.imgur.com/JBNmytM.png

    I was never able to get rid of the varying shaded effects using the css hacks I put in place.

    I would like a simple transparent single shaded header across the top for the non-sticky header and the sticky header. But I ended up with this.

    If you can help clean this css up and remove the varied shades, that would be awesome!

    October 25, 2017 at 2:51 pm #868755
    Jordan Shannon

    Hi,

    Is it possible for you to comment the header css that you currently added?

    Best regards,
    Jordan Shannon

    October 25, 2017 at 2:54 pm #868759
    shoutcloudstudios

    Sure…

    Done!

    October 25, 2017 at 10:43 pm #868981
    Jordan Shannon

    Hi,

    Thanks. I think I may see the issue. What is that black semi-transparent square in the middle of the slider. Is this apart of your custom css as well? Is this intentionally there?

    Best regards,
    Jordan Shannon

    October 25, 2017 at 11:00 pm #868990
    shoutcloudstudios

    This thing?

    Screenshot below…

    I think that’s behavior from the Revolution Slider while the slides are loading in…

    October 25, 2017 at 11:19 pm #869009
    Jordan Shannon

    Hi,

    Please add the following to quick css. This may be temporary:

    .tp-caption.tp-shape.tp-shapewrapper.tp-resizeme{
    background:none!important;
    }

    Best regards,
    Jordan Shannon

    October 25, 2017 at 11:23 pm #869011
    shoutcloudstudios

    Done!

    Added it to custom css for that specific page.

    I created a login for you. See below…

    October 28, 2017 at 2:44 pm #869905
    Ismael

    Hi,

    Are you trying to remove the background of the header on scroll? You can use the following css code.

    .header_color .header_bg {
    background-color: transparent;
    color: #ffffff;
}

    Go to the Header > Transparency Options to adjust the color of the font or the “Transparency menu color”.

    Best regards,
    Ismael

    October 28, 2017 at 5:56 pm #869982
    shoutcloudstudios

    Hi Ismael… that is exactly what I was looking for.

    Thanks so much…

    October 30, 2017 at 5:45 am #870308
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Sticky Header CSS Class Option’ is closed to new replies.