How do I decrease the white space between the menu and the body?

  • I’m using the theme “Write” by Themehaus and I’d like to decrease the white space that’s between the menu and the body of the homepage. It’s a one page site.

    Here it is:

    https://ianbrown.cc/arenu/

    I have hidden the title of the page with the plugin “Toggle the Title”, and it did also get rid of the space that the page title uses. But there was still too much white space.

    So I did more research and added this custom CSS:

    #access {
margin-bottom: 0;
}

#main, .entry-content, .entry-summary, .singular.page .hentry {
padding: 0;
}

.page .entry-title {
display:none;
}

    That helped, but I still want to decrease the amount of white space between menu and body even more. How do I do that?

    Also, how do I decrease the white space between the menu and the header?

    And how do I add a horizontal line above and below the menu?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    you have a margin-top of 30px on .main-navigation. Cut that to zero and it looks a lot better.

    .site-header has a margin-bottom of 75px. Cut that to tighten up the below menu spacing.

    To add a horizontal line, try something like this

    .main-navigation {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-left-width: 0;
    border-right-width: 0;
}
    Thread Starter LABachlr

    (@labachlr)

    Hi Steve,

    Thanks for the advice. Which file should I be editing and what are line numbers in the coding that you’re referring to?

    Here is what I tried editing in the style.css file for the “Write” theme that I’m using:

    Line 574: .main-navigation
    Line 577: Changed the margin-top from 45px to 0px; then tried changing it to 1px

    Line 509: .site-header
    Line 510: Changed margin-bottom from 75px to 0px; then tried changing it to 1px

    I tried both changes separately and updated the style.css file, but nothing happened. None of those above changes changed anything on the website.

    What am I doing wrong? Is there another file that is overriding the style.css file for the “Write” theme that I should be editing? If so, which file and what are the line numbers for the changes that need to be made?

    And in which file and on what line number should I put your suggested coding for the horizontal lines above and below the menu?

    Also, how do I get rid of the white space above the header/logo?

    Thanks!

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please learn how to use the CSS inspector built into your browser. (https://developers.google.com/web/tools/chrome-devtools/?hl=en)

    If your theme has a custom CSS option use it. If not, install the plugin “Simple Custom CSS” and put the updating CSS there. It will load last and override what’s coming from your theme.

    Thread Starter LABachlr

    (@labachlr)

    Thanks, Steve.

    As I noted in my original post, I used the custom CSS option to add that code that I sited. So I added the code that you gave for the horizontal line to the custom CSS box as well and it worked beautifully! Thanks!

    Your suggestion for .main-navigation also worked great via the custom CSS box for margin-top.

    I tried your suggestion for margin-bottom in the .site-header code via the custom CSS box, but for some reason, it’s not overriding the 75px in the style sheet until I enter a number ABOVE 75px. When I enter a number above 75px, it pushes the text down, which of course is the opposite of what I want. Any ideas?

    Also, what code can I use to get rid of the white space between the logo in the header and the top of the page. I tried adding 0px for margin-top in the .site-header code, but it didn’t change anything. And when I put a number above 0px, it moved the header down even more. So that implies to me that margin-top for .site-header is already at 0px. Suggestions?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    try margin-bottom: 0 !important

    Thread Starter LABachlr

    (@labachlr)

    I tried adding the following code in the Custom CSS box, but to no avail:

    .site-header {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

    The only time that coding did change anything was when I increased the number for margin-bottom to a number higher than 75px. It then pushed the text down, just like it did before.

    And when I even put 1px for margin-top, it moved the header/logo down. It’s as if another coding is overriding the site-header code in the Custom CSS box, which is very weird.

    Here is the entire code that I have in the Custom CSS box:

    #access {
margin-bottom: 0;
}

#main, .entry-content, .entry-summary, .singular.page .hentry {
padding: 0;
}

.page .entry-title {
display:none;
}
.main-navigation {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-left-width: 0;
    border-right-width: 0;
    margin-top: 10px;
}
    Thread Starter LABachlr

    (@labachlr)

    I just noticed that the header image is added as the site logo. I tried adding it as the header image, but that brought back the website title and put the image below it.

    I then put it back as the logo image and tried adding the following code, but this didn’t work to get rid of the white space above the logo image either:

    .site-logo {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

    Any more suggestions?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do I decrease the white space between the menu and the body?’ is closed to new replies.