[Resolved] Top Bar With a Button Link

Home Forums Support [Resolved] Top Bar With a Button Link

Home Forums Support Top Bar With a Button Link

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1611033
    Rika

    Hi Support,

    I would like to add a widget area in the top bar with a text and a button link. I’m going to use the “HTML” widget option but is not code-savvy.

    Will it be possible for you to provide me with some code to accomplish this. I will adjust the code as required and sort out the alignment and background color.

    I would like to replace a notification plugin I currently use.

    Thanks

    Rika

    #1611141
    David
    Staff
    Customer Support

    Hi there,

    this would be the HTML you require:

    <div class="top-bar-cta">
    	<span class="top-bar-cta-text">My call to action text</span>
    	<a class="button top-bar-cta-button" href="full_url_for_the_button_link">My button</a>
    </div>

    Then you can add this CSS to style it:

    /* Align text and button horizontally */
    .top-bar-cta {
        display: flex;
        align-items: center;
    }
    
    /* Add space to right of text */
    .top-bar-cta-text {
        margin-right: 20px;
    }
    
    /* Style button */
    a.top-bar-cta-button {
        border-radius: 4px;
        padding: 8px 16px;
        background-color: #f00;
        color: #fff;
    }
    
    /* Style button on hover */
    a.top-bar-cta-button:hover {
        background-color: #000;
        color: #fff;
    }

    In the Customizer > Layout > Top Bar – you can set the alignement to center and add some top and bottom padding to stop the button from touching the edges.

    And you can change the background color of the Top Bar in Customizer > Colors > Top Bar.

    #1611878
    Rika

    Thanks David.

    It works perfectly. Much appreciated.

    #1611962
    David
    Staff
    Customer Support
    #1906283
    Sven

    Hi David,
    I add this code also to my hp. But with less success. Button and Text appears at the right place. the css instructions have no effect. What do I wrong?

    fyi: You helped me already out with some customization which influenced th top bar. But I have no idea what we did those days. So maybe it depends on that.

    #1906526
    David
    Staff
    Customer Support

    Hi Sven,

    if you want to raise a new topic where you can share a link to your site we can take a look 🙂

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