I need my nav-bar brand text to have each letter a different colour. How do I do this?
I have attached an image of how it needs to be.
I know how to change the font but can’t change the individual letter colours.
This website is for my Uni project and is hosted on their own servers and can’t be accessed by anyone outside the network so can’t let you have a look I’m afraid.
Only way to do this is to wrap each letter in a span that is assigned the desired color.
You would need to edit header.php (in main sparkling directory or most preferably in a child theme), and find this line:
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
You’ll need to hard code your site title in next, like this:
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">MY SITE</a></span>
Next isolate each letter with a span and class:
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><span class="title-red">M</span><span class="title-yellow">Y</span> <span class="title-blue">S</span><span class="title-orange">I</span><span class="title-purple">T</span><span class="title-green">E</span></a></span>
Next add custom css for each desired color class like this:
.title-red {
color: #FF0000;
}
Another way to do it is just hard code the color into the span, so instead of <span class="title-red"> it would be <span style="color: #FF0000;">.
That would achieve the same result without the need to add the custom styles. Less work, but more messy.
Hi @krisbap,
I hope you are well today and thanks for helping out here in this forum.
Your help here is really appreciated.
Thanks,
Movin
