Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 10, 2016 at 12:52 pm #670816
    AboveDigital

    Hi,

    Is there a way to change the colour of the navigation bar while scrolling?
    Because at the moment it seems to have a black tint, so is there a way where i can still have the nav bar on transparent at the top of the page but while scrolling down the nav bar can have a background-color: #f00; ?

    Thanks,
    Above Digital

    August 10, 2016 at 1:28 pm #670830
    Guenni007

    well you can try it with transition:
    f.e.: Link

    #header_main_alternate {
   background-color: #f50 
}

.header-scrolled #header_main_alternate {
    background-color: #0f7 ;
    transition: background-color 1s ease-in 0s
}

    what kind of header have you choosen?
    Logo left/right/center
    navigation left/right/over or under Logo etc.

    August 10, 2016 at 2:49 pm #670851
    Yigit

    Hey!

    Please refer to @guenni007’s post above.

    @guenni007     Thanks! :)

    Best regards,
    Yigit

    August 10, 2016 at 3:05 pm #670854
    AboveDigital

    Hi,
    i have that css code and it hasn’t worked even though it has worked for other sites.
    Here’s the url to the site: http://www.abovedigital.duplicate.com.gridhosted.co.uk.

    August 10, 2016 at 3:16 pm #670858
    Yigit

    Hey!

    Can you please try using following code?

    #header {
    background: #f00;
}

#header.av_header_transparency {
    background: transparent;
}

    Cheers!
    Yigit

    August 11, 2016 at 5:27 pm #671463
    AboveDigital

    Hi Yigit,

    I tired that but didn’t work but i did manage to find a way. But thanks anyways.

    Above Digital

    August 12, 2016 at 6:35 am #671704
    Rikard

    Hi,

    Great, glad you found another solution. Please let us know if you should need any further help on the topic.

    Thanks,
    Rikard

    August 12, 2016 at 11:15 pm #672119
    slui

    Hi AboveDigital,

    Can you post the solution? Thanks.

    sl

    August 15, 2016 at 6:19 am #672509
    Rikard

    Hi @AboveDigital,

    Would be great if you could share your solution :-)

    Regards,
    Rikard

    August 15, 2016 at 10:47 am #672595
    AboveDigital

    Hi @Rikard and @slui it is:
    #header ,.header_color .header_bg {
    background: #b1b4b9;
    transition: background 0.3s ease-in;
    }

    #header.av_header_transparency {
    background: transparent;
    transition: background 0.3s ease-in;
    }

    August 16, 2016 at 6:04 am #672991
    Rikard

    Hi,

    Thanks for sharing @AboveDigital, much appreciated :-)

    Regards,
    Rikard

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