[Resolved] Sticky top bar for only posts

Home Forums Support Sticky top bar for only posts

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1051184
    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!

    #1051423
    David
    Staff
    Customer Support

    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.

    #1051445
    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?

    #1051450
    David
    Staff
    Customer Support

    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.

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

    #1051467
    Thassia

    Oh, now I see the code!

    #1051469
    David
    Staff
    Customer Support

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

    #1051474
    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/

    #1051477
    David
    Staff
    Customer Support

    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

    #1051480
    Thassia

    Done! That button is funny, lol.

    #1051485
    David
    Staff
    Customer Support

    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;
    }
    #1051489
    Thassia

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

    #1051629
    David
    Staff
    Customer Support
    #1055132
    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!

    #1055385
    David
    Staff
    Customer Support

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

    .custom-top-bar .button {
        margin-left: 40px !important;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.