[Resolved] Sticky top bar for only posts

[Thassia]

Hi, I made a top bar using a hook element. I wanted it to be sticky just above my main navigation. After reading many forum answers I saw that this particular code here would work on my site (some of the code already existed in my CSS from the dispatch theme).

.topbar {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 200;
}

.topbar-text {
letter-spacing: 2px;
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}

.main-navigation a {
letter-spacing: 1px;
position: -webkit-sticky;
position: sticky;
z-index: 999;
}
.main-navigation.navigation-stick {
top: 68px !important;
}

I haven’t made it live yet because I don’t want to topbar to be displayed in the homepage or on mobile because it takes most of the view.
I can stop the hook from appearing on the homepage but then my navigation floats in my homepage (because it is set to go under the topbar) and it looks weird plus stop readers from seeing the content.

Is there a way to adjust my main navigation to be at the top for my homepage and mobile viewers? Thank you so much!
You can see my top bar here (not sticky yet because I could fix the menu issue): https://diaryofajournalplanner.com/year-in-pixels-bullet-journal-page/

Thank you!

[David]

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.

[Thassia]

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?

[David]

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.

[Thassia]

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 –>?

[Thassia]

Oh, now I see the code!

[David]

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

[Thassia]

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/

[David]

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

[Thassia]

Done! That button is funny, lol.

[David]

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;
}

[Thassia]

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

[David]

Glad to be of help

[Thassia]

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

New to Journaling? Grab our free email course and get started today
Sign up!

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

Thank you!

[David]

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

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

[Author]

Posts