Space between logo and top of the page, and logo and article title.

  • Author
    Posts
  • #146617

    veltarna
    Member

    I would like to know the css reduce (not completely remove) these two, when reading an article.

    Thanks.

    The blog I need help with is xivsp.net.

    #146680

    lelandf
    Theme Author

    Hi there,

    Something like:

    .single .site-main {
    	margin-top: -50px;
    }

    Would work. Thanks for asking!

    -Leland

    #146693

    veltarna
    Member

    Thanks, I finally got what I wanted with some site inspector views and a little knowledge.

    This is what I used:

    .single .site-main {
    	margin-top: -75px;
    }
    
    .single .site-branding {
    	margin-top: -50px;
    }
    
    .home .site-branding {
    	margin-top: -50px;
    }
    
    .home .featured {
    	margin-top: -50px;
    }
    
    .home .featured-heading {
    	margin-top: -50px;
    }

    However, the following code doesn’t seem to be working:

    .home .featured-heading {
    	margin-top: -50px;
    }

    Maybe choosing the wrong class?

    Let me know what you think.

    #146694

    lelandf
    Theme Author

    Thanks, I finally got what I wanted with some site inspector views and a little knowledge.

    Awesome! Glad to hear you got it mostly figured out. The last part is a pretty quick fix, fortunately.

    Maybe choosing the wrong class?

    You’re on the right track. The div you selected is wrapped in another div that is absolutely positioned, which messes with that margin-top trick that normally works.

    Try this instead:

    .home .featured-heading-wrap {
    	top: -60px;
    }

    Note that the top value already had -10px applied, so minus 50 is -60px.

    You can remove the rules you applied to .home .featured-heading, it won’t make any difference anyway due to the reason I cited above.

    Hope this helps! Please let me know if you have any other questions and I’ll see what I can do. Your site is looking great! :)

    Regards,
    Leland

    #146695

    veltarna
    Member

    Yup. Worked well.

    Problem is the main menu and search box are not showing up.

    #146696

    veltarna
    Member

    To solve the issue with the menu I just called it back with:

    .home .site-navigation {
    	margin-top: 50px;
    }

    Thanks for the help!

    #146697

    lelandf
    Theme Author

    Cool, thanks for the follow up!

    As always, feel free to ask any other questions you may have and I’ll see what I can do to help.

    #146698

    lelandf
    Theme Author

    I just noticed that the menu issue is still present on single posts. Assuming you also want the navigation visible on single posts, you can target single posts like this:

    .single .site-navigation {
    	margin-top: 50px;
    }

    You can push down the “More Posts” title with this:

    .single .more-posts-title-wrap {
    	top: auto;
    }

    Hope this helps.

    -Leland

The topic ‘Space between logo and top of the page, and logo and article title.’ is closed to new replies.