[Resolved] WP Top bar

Home Forums Support [Resolved] WP Top bar

Home Forums Support WP Top bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1606247
    Ranjit Kumar

    Hi tom, i want the top bar as there in the https://gpsites.co/target/..
    But I want a button after text (see screenshot linked) and it should be sticky when scrolling..
    Please let me know how to do that from scratch

    i.is.cc/2Nou1eNn.png

    #1606631
    David
    Staff
    Customer Support

    Hi there,

    add a HTML widget to the Top Bar, inside the widget add your text and the button HTML eg.

    This is my text <a class="button top-bar-button" href="full_url_for_button_link">My button Label</a>

    Alternatively if you want more styling control then you can NOT use the Top Bar. Instead install the GenerateBlocks plugin:

    https://wordpress.org/plugins/generateblocks/

    Then create a new Block Element:

    https://docs.generatepress.com/article/block-element-overview/

    Use the Generate Blocks Container, Headline and Button Blocks to design your layout.
    Then set it to Hook: generate_before_header
    Set the Display Rules to Entire Site

    Once you have either method set up – share a link to your site and ill see what needs to be done to make it Sticky.

    #1609010
    Ranjit Kumar

    I didn’t install GP blocks as I am using GP premium..

    I created a hook and entered

    <div class="top-bar top-bar-align-center">Struggling With Keto Diet? <a href="https://www.google.com/">Get Help Now</a></div>

    It set it to generate_before_header and Rules: Entire Site

    Plus I added the css –

    .top-bar {
    background: #575757;
    color: white;
    font-size: 18px;
    text-align: center;
    }

    Please let me know how to make this sticky plus how to make the button little smaller and change the color..

    My website link – https://www.tastyfitnessrecipes.com/

    i want something like this– https://thatlowcarblife.com/

    Open the link and see the topbar.. i want exactly like this..

    Let me know how to do this..

    ThankS!

    #1609146
    David
    Staff
    Customer Support

    Add this CSS:

    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    #1609158
    Ranjit Kumar

    I added that css but when i am scrolling it is looking bad plus when scrolling within the ads it is taking over the top bar

    i.is.cc/lpASiV.png

    Also it is showing warnings – i.is.cc/lJUXBm.png

    Plus let me know how to make the button a little smaller within the top bar and change the color..

    i want something like this– https://thatlowcarblife.com/

    kindly open the website for reference..i want exactly like this website

    #1609642
    David
    Staff
    Customer Support

    I have updated the code here:

    https://generatepress.com/forums/topic/wp-top-bar/#post-1609146

    This will fix the overlapping issue. And you can ignore those warnings in the Additional CSS.

    Then to make the button smaller and add some space above and below add this CSS:

    .top-bar-button {
        padding: 2px 10px;
        margin-left: 20px;
        border-radius: 4px;
    }
    .top-bar {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    I include this border-radius: 4px; to add rounder corners to the button

    #1609817
    Ranjit Kumar

    Thanks! Worked Great! Awesome support as always..

    #1610102
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.