This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

4
  1. Andrew Misplon Staff 10 years, 5 months ago

    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. HunterGatherer 10 years, 5 months ago

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

    HG

  3. Andrew Misplon Staff 10 years, 5 months ago

    For sure :)

  4. Jane 10 years, 4 days ago

    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.

Have a different question or issue?

Start New Thread