Navigation
Archive / Create static 'sticky' top bar and menu bar on site (Renew)
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 27, 2017 at 5:04 am #1347588
    micody
    Participant

    Hello,

    I am trying to make the top bar, as well as the menu bar remain static on scroll on my Renew theme site. The header with logo does not need to ‘stick’.

    I have come across a few similar questions, but none of the solutions work quite right on my site.

    Thanks for your help!

    Latest versions of WP / X / CS

    January 27, 2017 at 5:05 am #1347589
    micody
    Participant
    This reply has been marked as private.
    January 27, 2017 at 5:40 am #1347615
    Paul R
    Moderator

    Hi,

    To achieve that, you can add this under Custom > CSS in the Customizer.

    
.x-topbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #F0F0F0;
}

.x-logobar {
    margin-top:46px;
}

.x-navbar.x-navbar-fixed-top {
    top:46px;
}

    Hope that helps.

    January 27, 2017 at 8:10 am #1347770
    micody
    Participant

    Perfect! Thank you!

    January 27, 2017 at 9:18 am #1347822
    Rahul
    Moderator

    You’re most welcome!

    Feel free to ask us again.

    March 7, 2017 at 10:18 am #1397881
    micody
    Participant

    This worked perfectly but now I have added a second line to the top bar (i.e. added social media icons), the mobile version of the top bar / logo bar needs adjusting. Can you help?

    Thanks

    March 7, 2017 at 12:25 pm #1398084
    Nabeel A
    Moderator

    Hi again,

    I checked your site and your topbar looks good in smaller screens, can you please provide us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

    Thanks!

    March 8, 2017 at 4:15 am #1398854
    micody
    Participant
    This reply has been marked as private.
    March 8, 2017 at 4:20 am #1398858
    micody
    Participant
    This reply has been marked as private.
    March 8, 2017 at 7:26 am #1399020
    Paul R
    Moderator

    Hi,

    You can add this under Custom > Edit Global CSS in the Customizer.

    
@media (max-width: 767px) {
body .x-logobar {
    margin-top: 79px;
}
}

    Hope that helps.

    March 10, 2017 at 4:01 am #1401714
    micody
    Participant

    Great, thanks! 🙂

    March 10, 2017 at 6:19 am #1401795
    Paul R
    Moderator

    You’re welcome! 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1347588 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>