Sticky top bar for only posts

Hi there,

Do you intend to add any other content to your site header? If not you can use the Navigation as Header and then we could hook your top bar into the navigation so it will also be sticky.

Doc on Navigation as Header:
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know.

That could work David! Would that appear on mobile too?
So I went ahead and made my navigation as header. I tried to hook my top bar to the header in the hook editor but it didn't stick. What am I doing wrong?

Ok so next steps are:

1. Need to make some changes to the HTML in your header. Change the DIV container to this:

<div class="custom-top-bar hide-on-mobile">
<!-- rest of your HTML here -->;
</div>

Then you can move your inline styles to Customizer > Additional CSS:

.custom-top-bar {
    background-color: #ffff00;
    padding: 10px;
    font-size: 20px;
    text-align: center;
}

the hide-on-mobile class will remove it from mobile:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

2. Switch the Hook to inside_navigation

Then let me know so i can take care of the CSS required form positioning.

David, do you mean changing the header.php in my theme editor? Is there some code missing in the step 1 before <!– rest of your HTML here –>?

Oh, now I see the code!

I meant the code in your Header Element - how did you add it? I assumed it was hand coded.

It worked, thank you so much! But indeed would love some CSS to make sure it is in one line and that the background color is not contained! https://diaryofajournalplanner.com/year-in-pixels-bullet-journal-page/

awesome - wow thats a big button lol.
Need to make a few more changes:

1. Edit the HTML ( again sorry ) as we need to add an inner container like so:

<div class="custom-top-bar hide-on-mobile"> 
    <div class="custom-top-bar-inner">
        <!-- rest of HTML here -->
    </div>
</div>

2. Go to Customizer > Layout > Primary Navigation and set the container and inner container to full width.

Once thats done we should have a full width bar and then i can play with the CSS

Done! That button is funny, lol.

And finally this CSS:

.custom-top-bar-inner {
    max-width: 1275px;
    margin: auto;
    display: flex;
    justify-content: center;
}

.custom-top-bar .button {
    margin-left: 40px;
}

Absolutely brilliant! All good David. Thank you so much and have a great day!

Glad to be of help

David, bothering you again here because today I went to my hook to change the link of the button but after I updated the button it is kind of stuck with the text. I do have space there but it does not show.
I am afraid I am deleted something. I went back to the steps but all seems to be right.
Here is my HTML

Can you see what I am missing?
https://diaryofajournalplanner.com/year-in-pixels-bullet-journal-page/

Thank you!

Looks like the CSS has got re-ordered in your cache.
Try adding important to this :

.custom-top-bar .button {
    margin-left: 40px !important;
}