[Support request] Text Logo with different color

[Sonja]

Hello, I want a text logo in the navigation bar, instead of an image logo. This text logo hast two words and each word should have a different color. Can you please tell me, how to do it?

[David]

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;
}

[Sonja]

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

[Sonja]

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

[Sonja]

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.

[Leo]

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 🙂

[Sonja]

OK, i have editet the post.

[Author]

Posts