Divi – Change menu background color on scroll with the divi theme


hi guys and welcome to this video this
is Jamie from www.system22.net and https://great-webdesign.com/ this video is another video about the Divi theme here it’s awesome
I’ve actually got a template loaded that’s a free download from their site
and it’s got some fantastic features here straight out of the box you just
load this up and it comes with all this good stuff here
what I’ve done at the top here I’ve given it a transparent menu so the logo
and the menu looks like it’s sitting on top of the background image right here
this is great looks wonderful looks fine but what happens when we scroll once we
get to there it doesn’t look so good we’ve lost half of our logo and our
links we can’t see them and our writing and content is sort of getting muddled
up here with the menu so how do we go about fixing this well it’s very easy if
we go back to our Divi dashboard and go to the theme customizer Divi theme
options theme customizer and what we need to do is go to header
and navigation these are primary menu bar settings and that’s that’s what I
set the the text color is white and active link color is that blue color
there and the background color I’ve got a transparent there I haven’t got a
drop-down but I’d do the same thing with that so that’s setting these settings
here now to stop it from what I want to do is put a background color behind the
menu here when it Scrolls so it doesn’t get all confused there and we don’t lose
all our links and half of our logo so if we go back to our header and navigation
settings we’re a go down a fixed navigation settings here and it’s our
primary menu the link hello will keep the same just make sure that is the same
sometimes they have a bit of opacity on there by default and here’s our
background color now we wanna I guess we’ll give it a blue color just scroll a
little bit and see what that color looks like let’s have a look here you see it’s
got a nice blue color let’s see if we can’t marry it in with this color a
little bit better here I could just look and see what that
color is but that’s okay you get the idea and let’s save and publish that now if
we go back to our site and do a refresh now when we start scrolling down you’ll
see it’s got that nice solid background that makes it a lot less confusing and
we’ve got the best of both worlds so when we’re at the top here it’s got a
nice see-through transparent color where we go down things aren’t getting
confused anymore so that was pretty short and sweet I
hope you enjoyed that and found that useful make a lot of bootstrap sites and
that actually involves quite a lot of CSS to have it do that and sometimes you
have to use a bit of JavaScript as well so that is how you do it to change your
menu opacity and color on scroll with the Divi theme
so I hope that’s been useful to you once again this has been Jamie from system 22
and great web design comm if you’ve enjoyed this video please subscribe to
our Channel thanks for watching have a great day

16 Comments

  1. Yildiz said:

    Another good one Jamie, perhaps someday you show us how to make elegantthemes's own page mobile menu clicked hover effect 🙂

    October 19, 2017
    Reply
  2. Joefel Cepeda said:

    Great Work Jamie greatly appreciated, perhaps change menu text color on scroll would go great with this. Any idea how?

    November 21, 2017
    Reply
  3. Vincent Amari said:

    hi, which template was this please?

    January 24, 2018
    Reply
  4. Harsha said:

    Thank you!

    February 21, 2018
    Reply
  5. Debbie Lonergan said:

    Thanks!!

    April 3, 2018
    Reply
  6. prem prince said:

    How did you make header transparent when no scrolling there?

    April 27, 2018
    Reply
  7. Tommy Owen said:

    Thank you.

    June 13, 2018
    Reply
  8. QuickPro Digital Marketing said:

    THANKS!!!! Very good video

    July 5, 2018
    Reply
  9. Eric Johnson said:

    Thank you!

    July 26, 2018
    Reply
  10. Bob Cole said:

    Hi Great videos for CSS but having trouble changing the top menu scrolling background color to be different on separate pages ( in divi). `can you help

    September 9, 2018
    Reply
  11. TRADETecH - Website Designing Company said:

    thank you…very good…

    December 24, 2018
    Reply
  12. Sofía Vapau said:

    THANKS!!!!

    April 20, 2019
    Reply
  13. The Truth said:

    Finally someone who can make a short divi video. Thank You.

    May 3, 2019
    Reply
  14. Hiyajo Maho said:

    Is it possible to do this with a background image instead of a solid color?

    May 4, 2019
    Reply
  15. Thomas Dahl said:

    Very cool. Thanks. But you only mention the primary menu. What about the secondary menu. It does not have the same options in the customizer.

    May 16, 2019
    Reply
  16. Mary Jane Faller said:

    Wow! Thanks. I need this. 🙂

    August 9, 2019
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *