-
Posts
-
I have been working on this site using enfold http://www.strideriterosedale.com/ and really like the colored bar I made below the header using a 5px tall Grid Row with 5 columns of different colored backgrounds. Helps to add a nice twist to the standard enfold layout.
Is there any way to either make this bar sticky with the header or work it in as a border line some how?
I got it to work as an image inside a sticky ubermenu but I’d prefer to not have to use an extra plugin just for that.Thanks
JonHey Jon,
I’m sure you can get that into the theme without using the Ubermenu plugin, if you should need help in doing to so then please link to the site you’re working on and we’ll have a closer look at it.
Best regards,
RikardThanks for the quick response :)
I had tried working it into the files of my child theme but couldn’t get it which is why I briefly went with Ubermenu.
Ultimately would like to share the solution in the forum for other users since it is a nice twist on Enfold with cool possibilities if it works.Current Grid Row I’m using is 5px tall with 5 equal columns with different colored backgrounds and they do not stack on mobile
See Private info.
Hi,
You can use a pseudo class to create the effect without the use of the grid row.
.html_header_top.html_header_sticky #header::after { height: 5px; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(to right,#ad0701,#ad0701 20%,#f25c2e 20%,#f25c2e 40%,#92c743 40%,#92c743 60%,#9078b2 60%,#9078b2 80%,#f25c2e 80%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(to right,#ad0701,#ad0701 20%,#f25c2e 20%,#f25c2e 40%,#92c743 40%,#92c743 60%,#9078b2 60%,#9078b2 80%,#f25c2e 80%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(to right,#ad0701,#ad0701 20%,#f25c2e 20%,#f25c2e 40%,#92c743 40%,#92c743 60%,#9078b2 60%,#9078b2 80%,#f25c2e 80%); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right,#ad0701,#ad0701 20%,#f25c2e 20%,#f25c2e 40%,#92c743 40%,#92c743 60%,#9078b2 60%,#9078b2 80%,#f25c2e 80%); /* Standard syntax (must be last) */ }Only issue is there is a bit of blur between the colors, which sucks :(
But it’s a starting point :)
You could also use ::before on the footer to do the same thing down below
TJ
Hi,
@tjswarbs78 thanks for your tip,
@millertimesites did this help you?Best regards,
Mike
- You must be logged in to reply to this topic.