Remove space between navigation and content in Twenty Fourteen Theme

  • Resolved Abdul Improv

    (@abdul-improv)


    11 years ago

    Dear Team,

    I have searched a lot for the solution and couldn’t find it over the forums. I have created a website https://www.hi-india.in/about-us/

    In the above page I want to remove the space between the Navigation menu and the Page title. Even in the sidebar the space should be removed. Please advice me.

    Thanks for your support

    Edit: I want even the content to be looking full and remove the gap between content and both the sidebars.

    Regards
    Abdul

Viewing 6 replies - 1 through 6 (of 6 total)

  • There’s a big padding top both in content area and sidebar. By removing that, you remove the distance in relation to the top navigation. What’s causing the space is this CSS rule:

    .content-area, .content-sidebar {
    padding-top: 72px;
}

    By decreasing 72, you decrease the distance. If you write padding-top:0; the space is eliminated. However, one thing is to decrease the space quite another to eliminate it completely, which I don’t think is the result you intend to achieve, or is it?

    Thread Starter Abdul Improv

    (@abdul-improv)

    Thanks antonietta456,

    That code worked. I actually wanted to reduce the space. Sorry for the miscommunication.

    Can you please support me in widening the content. There is lot of gap between the content and sidebars. I appreciate your support

    Thanks
    Abdul

    I don’t think it’s advisable to touch the margins of the two columns, because they’re already quite close together, and the layout would be messed up. However, by making the content of the main column wider, you can achieve the effect of decreasing the distance between main column and sidebar. Look for this CSS rule:

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    margin: 0 auto;
    max-width: 474px;
}

    By changing the max-width:474px; to max-width:500px; for example (or whatever measurement you prefer) you should achieve a good result.

    Be aware that this will be applied to other elements as well. To apply this only to the entry content of a page, select your targets like so:

    .page .entry-content {

}

    If you want to apply it more generally to the entry-content, select your target for the CSS like this:

    .site-content .entry-content {

}
    Thread Starter Abdul Improv

    (@abdul-improv)

    Dear antonietta456,

    You made my day.. Love you so much for your support. Adding your name to the contributors list of my website.

    Regards
    Abdul

    That’s so nice, thanks.

    Sorry to get on the end of this… I’m trying to remove my padding too… when I added 

    @media screen and (min-width: 673px) {
     .content-area {padding-top: 0px !important;}
}

    it removed space from all other pages, so now the titles are squashed at the tops…

    https://www.scrumptiousbunscakeschool.co.uk

    Any ideas please?

    Sx

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Remove space between navigation and content in Twenty Fourteen Theme’ is closed to new replies.