Text Logo with different color

Hi there,

you would need to disable the site title and logo in the customizer and the do this:

1. Appearance > Elements --> New Hook and give it a title.
2. Add this Content - update the text and the URL

<p class="main-title" itemprop="headline">
    <a href="https://mic.assemblewp.com/" rel="home">
        <span class="title-color-one">First</span><span class="title-color-two"> Second</span>
    </a>
</p>

3. Select the inside_navigation hook
4. Set the Display Rules > Location --> Entire Site.

Add this CSS and change the colors and font styles to suit:

/* Align navigation */
@media (min-width: 769px) {
    .inside-navigation {
        display: flex;
        align-items: center;
    }

    .inside-navigation .main-title {
        margin-right: auto;
    }
}

/* Center title for mobile */
.inside-navigation .main-title {
    text-align: center;
}

/* Style both text items */
.title-color-one, .title-color-two {
    font-size: 20px;
    font-weight: bold;
}

/* Set individual colors */
.title-color-one {
    color: #ffffff;
}

.title-color-two {
    color: #ff2222;
}

Hi David, i tried this, but the color for title-two does not work.

Ah, I have found it. It was a error in the hook: </span

But If I smaller the browser, the text logo has no padding to the left. And also on mobile, it sits in the middle. But it should be on the left.

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

OK, i have editet the post.