reduce spaces and remove menu – truly minimal theme

  • Unknown's avatar
    clunaire · Member ·

    Hiya,

    I’ve just started using the truly minimal theme on my blog, clunaire.com. At the moment, there is quite a big gap between the header image and the actual blog text/sidebar. How do I reduce this?

    I’d like to reduce the gaps between the sidebar images as well if possible!

    The other thing I wanted to do was remove the menu bar under the header, as I plan on using my sidebar images for navigation instead. Can anyone help?

    PS. I am a total and utter CSS/coding dunce so feel free to explain things as though you’re talking to a 5 yr old :P

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    fabianapsimoes · Member ·

    At the moment, there is quite a big gap between the header image and the actual blog text/sidebar. How do I reduce this?

    Try this:
    #masthead { padding-bottom: 0; }

    If you feel the gap could be even smaller, you can add this:
    .navigation-main { margin-bottom: 0; }

    I’d like to reduce the gaps between the sidebar images as well if possible!

    .widget.widget_image { padding: 0; }

    If you want it even tighter, you should do instead:

    .widget.widget_image { padding: 0; margin-bottom: 0 }

  • Unknown's avatar
    fabianapsimoes · Member ·

    For hiding the top menu bar, you can try:

    .navigation-main {
display: none
 }

    Now that I tried that, I believe you won’t need the CSS for decreasing the gap between the header and the content. They become quite close by removing the menu bar.

    Hope this helps :)

  • Unknown's avatar
    clunaire · Member ·

    Thank you so much!!! That’s worked a treat on the widgets and gaps. I tried putting in that code for the menu but it came up with an error, saying “expected RBRACE at line 26, col 20. Rule is empty.” Have I put the code in wrong or something?

    Thanks again!

  • Unknown's avatar
    fabianapsimoes · Member ·

    Oh, seems my code got formatted wrong, it should not include the “
    .

    Try this:
    .navigation-main { display: none; }

  • Unknown's avatar
    clunaire · Member ·

    That’s worked!

    Thank you so much :D

  • Unknown's avatar
    designsimply · Member ·

    @fabianapsimoes, if you put code between backticks in the WordPress.com forums, the formatting should look better/more consistent.

    Thanks tons for the help you’ve posted so far!

  • Unknown's avatar
    robertsjo · Member ·

    Hi there,

    I’m also using Truly Minimal (switched from Toolbox, as it was retired) and I too would like to lessesn the space between the menu and the first text or image. I followed these instructions, but they didn’t work! Any suggestions? The site I’m working on is http://juliadograbrazell.com/

    Thanks!

  • Unknown's avatar
    designsimply · Member ·

    I checked http://juliadograbrazell.com/ and I see that you used the following custom CSS to reduce the margin below the site header:

    .site-header {
	margin:0 0 -10em
}

    Nice work! To make the gap even smaller, adjust the “-10em” number.

  • Unknown's avatar
    robertsjo · Member ·

    Thanks! It’s pretty much looking as I’d like now, EXCEPT when I access it on Safari. Then, the text has jumped up above the menu, making it unreadable. Any suggestions? I’m a bit of a CSS newbie, so am rather stumped! Seems to be fine in Firefox and Chrome. Anything you could suggest would be great!!

  • Unknown's avatar
    thesacredpath · Member ·

    @robertsjo, give the following a try. It seems to work in both Firefox and in Safari and gives nearly the exact same spacing.

    .site-header {
margin: 0 0 -2em;
}
  • Unknown's avatar
    designsimply · Member ·

    It looks like that negative margin you first tried isn’t working well cross-browser! I posted an alternate solution at https://en.forums.wordpress.com/topic/truly-minimal-letter-spacing?replies=13#post-1395416

  • The topic ‘reduce spaces and remove menu – truly minimal theme’ is closed to new replies.