Add a Logo Subtitle
Latest update: October 3, 2018 | Reading time: 1 to 2 minutesYou can create a logo subtitle using the following steps.
First, create a span for your logo subtitle with logo_subtitle class and put it inside the logo div wrapper. The final logo div should be something like this:
<div class="logo"> <a class="brand" href="index.html"> <img src="images/your_logo.png" alt="optional logo"> <span class="logo_title">Logo Title</span> <span class="logo_subtitle">Logo Phrase</span></a> </div>
Then, open your style.css ( or a style-skincolor.css file you might use ) and do the following:
- Add a new rule set for logo_subtitle class, as below:
.logo a.brand span.logo_subtitle { height: 24px; font-size: 16px; line-height: 30px; font-weight: 400; display: block; clear: both; margin-left: 48px; -webkit-transition: all 500ms ease; transition: all 500ms ease; }
Of course, you may change those values according to your needs!
- Go to line 6868 ( on .logo a.brand rule set ) and change height value. The new value should be the sum of .logo a.brand span.logo_title AND .logo a.brand span.logo_subtitle height values…so in this case should be 30px + 24px = 54px