[Resolved] WP Top bar

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

Add this CSS:

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

Thanks! Worked Great! Awesome support as always..

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts