[Support request] Text Logo with different color

Home Forums Support Text Logo with different color

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #909739
    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?

    #909782
    David
    Staff
    Customer Support

    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;
    }
    #909800
    Sonja

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

    #909801
    Sonja

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

    #909808
    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.

    #909841
    Leo
    Staff
    Customer Support

    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 🙂

    #909848
    Sonja

    OK, i have editet the post.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.