Add image/logo to navigation bar when scrolling

  • Author
  • #159562

    Original poster


    I want to add a logo/image to the left side of the navigation bar when you’re scrolling down the page. In the image attached, I want it in the Red box area to the left of the HOME text.


    The blog I need help with is:


    Theme Author


    By default, on the blog, archives, and pages, the sticky header displays navigation links; on single posts, the sticky header displays the title of the post and a reading progress bar. It’s not designed to display a site logo.

    You can try this custom CSS to replace the first menu item in your sticky menu section with a logo:

    #masthead .sticky-header .main-navigation > ul > li:first-of-type > a {
        background-image: url(;
        background-position: center;
        font-size: 0px;
        background-size: 200px 60px;
        width: 200px;
        height: 60px;

    Note, this example uses a logo size which has 200x60px. Modify these values to fit your needs.

    Please let me know if you have any additional questions.

    Kind regards,

The topic ‘Add image/logo to navigation bar when scrolling’ is closed to new replies.