Add image/logo to navigation bar when scrolling

  • Author
    Posts
  • #159562

    zobapress
    Member
    Original poster

    Hi,

    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.

    https://imgur.com/a/2NOgVIq

    Thanks!

    The blog I need help with is: zobapress.com

    #159582

    tarasdashkevych
    Theme Author

    Hello,

    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(https://i2.wp.com/zobapress.com/wp-content/uploads/2020/10/cropped-zobalogo-larger.png);
        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,
    Taras

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