Elliott Davidson Elliott Davidson - 1 year ago 33
CSS Question

CSS styling issue for replicating logo

I'm trying to replicate this design for my logo but struggling with the CSS. So far I have managed to write the code below but am struggling to create the stacked text for growth hacker and entrepreneur. If you have any guidance it would be much appreciated.

enter image description here

<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">Elliott Davidson | <span class="logo-growth-hacker">Growth Hacker</span><br><span class="logo-entrepreneur">Entrepreneur</span></a>

.navbar-brand
font-weight: bold
font-size: 1rem
text-transform: uppercase
color: $light-grey
padding: 30px 30px 30px 0px

.navbar-default .navbar-brand
color: $light-grey

a.navbar-brand.navbar-brand-fix

span.logo-growth-hacker
font-weight: 200
font-size: 0.5em
text-transform: none
vertical-align: text-top

span.logo-entrepreneur
font-weight: 200
font-size: 0.5em
text-transform: none
margin-top: -18px
float: inherit
margin-left: 182px
padding-top: 5px

Answer Source

Here's how I would do it. Create a couple of flex columns using the row layout and style accordingly.

a {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #666, #666 50%, #444 50%, #444);
  color: white;
  padding: 1rem;
  text-decoration: none;
  font-size: 1.25rem;
}
.col {
  border-left: 1px solid white;
  padding: 0 0 0 1rem;
  margin: 0 0 0 1rem;
  font-size: .6rem;
}
<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">
  <span class="name">Elliott Davidson</span>
  <span class="col">
    Growth Hacker<br>
    Entrepreneur
  </span>
</a>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download