Custom Striped Navbar CSS

EDIT: ooo switch out the pixels for percents to make them specific amount of stripes!

/*horizontal stripes*/
.navbar, .footer {
  background: repeating-linear-gradient(#FIRSTCOLOR 0%,#FIRSTCOLOR 25%,#SECONDCOL 0%,#SECONDCOL 50%,#THIRDCOL 0%,#THIRDCOL 75%,#FOURTHCOL 0%,#FOURTHCOL 100%);
}

Just a little thing for fun while working on way harder codes, patterns the header and footer just like patterns on the bee theme and red velvet snake theme!

/*vertical stripes*/
.navbar, .footer {
  background: repeating-linear-gradient(90deg, #FIRSTCOLOR 0px, #FIRSTCOLOR 20px, #SECONDCOL 0px, #SECONDCOL 40px)
}

/*horizontal stripes*/
.navbar, .footer {
  background: repeating-linear-gradient(#FIRSTCOLOR 0px, #FIRSTCOLOR 7px, #SECONDCOL 0px, #SECONDCOL 14px);
}

/*diagonal stripes*/
.navbar, .footer {
  background: repeating-linear-gradient(-45deg, #FIRSTCOLOR 0px, #FIRSTCOLOR 15px, #SECONDCOL 0px, #SECONDCOL 30px);
}

Switch out ".navbar, .footer" with .nav-mobile-menu to recolor the mobile nav menu instead! (or together) like this

.nav-mobile-menu {
  background: repeating-linear-gradient(90deg, #FIRSTCOLOR 0px, #FIRSTCOLOR 20px, #SECONDCOL 0px, #SECONDCOL 40px)
}

to do more than 2colors of stripes keep adding #NEWCOLOR 0px, #NEWCOLOR (the first stripe's number times the amount of colors up until this point)px
you can also make the numbers smaller or bigger to change the size of the stripes

so a rainbow stripe with slightly smaller stripes would look like

.navbar, .footer {
  background: repeating-linear-gradient(90deg, red 0px, red 15px, orange 0px, orange 30px, yellow 0px, yellow 45px, green 0px, green 60px, blue 0px, blue 75px, purple 0px, purple 90px)
}

heres a code for like yellow and black traffic pattern :)

.navbar, .footer {
  background: repeating-linear-gradient(45deg,yellow 0px,yellow 15px,#24141d 0px,#24141d 30px);
}

.nav-mobile-menu {
  background: repeating-linear-gradient(135deg,yellow 0px,yellow 15px,#24141d 0px,#24141d 30px);
}