Home>Support>Menu gradient
  1. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    Hi HG

    The menu background is applied as follows:

    .main-navigation {
        background: #343538;
    }
    

    So using that same selector you can add a gradient.

    Ref: https://css-tricks.com/css3-gradients/

    Something like:

    .main-navigation {
     /* can be treated like a fallback */
      background-color: red;
    
      /* will be "on top", if browser supports it */
      background-image: linear-gradient(red, orange);
    
      /* these will reset other properties, like background-position, but it does know what you mean */
      background: red;
      background: linear-gradient(red, orange);
    }
    
  2. 6 years, 7 months ago HunterGatherer

    Thanks again Andrew. I’ll test it and let you know how it turned out.

    HG

  3. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    For sure :)

  4. 6 years, 1 month ago Jane

    Wait, the code is different on this site.

    https://css-tricks.com/css3-gradients/

    You have the above, then you have this:

    .gradient {
      background-image:
        linear-gradient(
          45deg, 
          red, #f06d06
        );
    }
    

    Where does that fit in with this?

    .main-navigation {
     /* can be treated like a fallback */
      background-color: red;
    
      /* will be "on top", if browser supports it */
      background-image: linear-gradient(red, orange);
    
      /* these will reset other properties, like background-position, but it does know what you mean */
      background: red;
      background: linear-gradient(red, orange);
    }
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More