Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 3, 2025 at 8:49 am #1489800
    bemodesign

    I want these similar 3 colored lines at the top of each page. What is the best option to do this so that it looks good on all size screens and mobile view? The lines can be straight also, Just thinking 3 lines somehow.

    RIght now it looks ok, but not on mobile.

    Thanks!

    Home

    October 3, 2025 at 11:26 am #1489807
    Guenni007

    try this
    ( but it looks better if your header does not have shadow )

    #top #header:not(.av_header_transparency) #header_main {
  box-shadow: none;
}

#header_main:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  height: 100%;
  background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iRHJlaS1MaW5pZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODAwIDE1MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlPgogICAgLmZlbGQwIHtmaWxsOiAjOTQxMDA5O30KICAgIC5mZWxkMSB7ZmlsbDogI2VmYTQwYjt9CiAgICAuZmVsZDIge2ZpbGw6ICMwMDgwYTI7fQogIDwvc3R5bGU+CiAgPHBhdGggY2xhc3M9ImZlbGQyIiBkPSJNODAwLDEwYy0zOS40LDEwLjgtMjc0LjYsNzMuMS01MjkuMSw4Ni4zQzEzMS42LDEwMS43LDI3LjgsODQuNiwwLDc5LjZ2MTQuMWMyNy44LDUuMSwxMzEuNiwyMi4yLDI3MC45LDE2LjgsMjU0LjYtMTMuMiw0ODkuOC03NS41LDUyOS4xLTg2LjN2LTE0LjJaIi8+CiAgPHBhdGggY2xhc3M9ImZlbGQxIiBkPSJNODAwLDI0LjFjLTM5LjQsMTAuOC0yNzQuNiw3My4xLTUyOS4xLDg2LjNDMTMxLjYsMTE1LjgsMjcuOCw5OC43LDAsOTMuNnYxNC43YzI3LjgsNS4xLDEzMS42LDIyLjIsMjcwLjksMTYuOCwyNTQuNi0xMy4yLDQ4OS44LTc1LjUsNTI5LjEtODYuM3YtMTQuN2gwWiIvPgogIDxwYXRoIGNsYXNzPSJmZWxkMCIgZD0iTTgwMCwzOC44Yy0zOS40LDEwLjgtMjc0LjYsNzMuMS01MjkuMSw4Ni4zQzEzMS42LDEzMC41LDI3LjgsMTEzLjQsMCwxMDguNHYxNS4yYzI2LjksNC44LDEwNC40LDE3LjMsMjE3LjEsMTcuOCwxODQuNSwxLDQ1MC44LTUwLjcsNTgyLjktODd2LTE1LjZaIi8+Cjwvc3ZnPg==");
  background-size: 100% 100%;
  transition: all 1s ease-in-out;
}

#top #header.header-scrolled #header_main:before {
  opacity: 0;
}

    play with top position – what fits best for you.
    and maybe you set the height of the before pseudo-container to an absolute value ( e.g: height: 120px;) then it will not shrink with the header height.

    October 3, 2025 at 11:39 am #1489810
    Guenni007

    or a little more elegant:

    #top #header:not(.header-scrolled-full) #header_main {
  box-shadow: none;
}

#header_main:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--enfold-header-height) - 150px);
  width: 100%;
  height: 200px; 
  background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iRHJlaS1MaW5pZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODAwIDE4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjOTQxMDA5OwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjZWZhNDBiOwogICAgICB9CgogICAgICAuc3QyIHsKICAgICAgICBmaWxsOiAjMDA4MGEyOwogICAgICB9CiAgICA8L3N0eWxlPgoKICA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNjE0Ljg4NSw2My44MzVjLTEwNS4xNzksMjUuNTMxLTI2NC44MDQsNTUuOTY1LTQyNy45NTQsNTUuOTY1LTEwMi4xMjcsMC0xNjAuOTctMTcuODkxLTE4Ni45MzEtMjguNTI5djE0Ljk5MWMyNS45NiwxMC42MzcsODQuODA0LDI4LjUyOSwxODYuOTMxLDI4LjUyOSwxNjMuMTUsMCwzMjIuNzc1LTMwLjQzNCw0MjcuOTU0LTU1Ljk2NSw5NS42MjYtMjMuMjEyLDE2NC43ODItNDYuNjc5LDE4NS4xMTUtNTMuODM1di0xNC45OTFjLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MTQuODg1LDc4LjgyNWMtMTA1LjE3OSwyNS41MzEtMjY0LjgwNCw1NS45NjUtNDI3Ljk1NCw1NS45NjUtMTAyLjEyNywwLTE2MC45Ny0xNy44OTEtMTg2LjkzMS0yOC41Mjl2MTQuOTljMjUuOTYsMTAuNjM3LDg0LjgwNCwyOC41MjksMTg2LjkzMSwyOC41MjksMTYzLjE1LDAsMzIyLjc3NS0zMC40MzQsNDI3Ljk1NC01NS45NjUsOTUuNjI2LTIzLjIxMiwxNjQuNzgyLTQ2LjY3OSwxODUuMTE1LTUzLjgzNXYtMTQuOTljLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MDAsMzkuOTgxYy0yMC4zMzMsNy4xNTUtODkuNDg5LDMwLjYyMi0xODUuMTE1LDUzLjgzNS0xMDUuMTc5LDI1LjUzMS0yNjQuODA0LDU1Ljk2NS00MjcuOTU0LDU1Ljk2NS0xMDIuMTI3LDAtMTYwLjk3LTE3Ljg5MS0xODYuOTMxLTI4LjUyOXYxNy4zMjZjMzAuMDc1LDExLjQ0Miw4OS4yMjgsMjcuMjAyLDE4Ni45MzEsMjcuMjAyLDE2NC44MjUsMCwzMjUuODg0LTMwLjcxMiw0MzEuOTcyLTU2LjQ3Niw4OS4wNC0yMS42MjQsMTU1LjM3LTQzLjQ5MiwxODEuMDk4LTUyLjM4MXYtMTYuOTQzWiIvPgo8L3N2Zz4=");
  background-size: 100% 100%;
  transition: opacity 1s ease-in-out;
}

#top #header.header-scrolled #header_main:before {
  opacity: 0;
}

    svg with more convex look.

    October 3, 2025 at 6:04 pm #1489825
    bemodesign

    I added this to CSS but nothing happened. How do I test these?

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