masthead bottom margin

  • Resolved charl1eapple

    (@charl1eapple)


    7 years, 6 months ago

    Hello everyone. First WP site here. Using Bento. Would like to reduce white space between horizontal menu and page content. On searching for this, I learned it’s called the Masthead bottom margin and is defaulted to this big; the video I watched showed you a simple box to untick in the page editor on the right side of the editor on the right column, but I don’t have this in this theme. I found another hopeful post on this forum which advised selecting ‘page header settings’ and ‘activate extended header’ I tried this but it kept making the space bigger and bigger each time. Can anyone help please? Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hey @charl1eapple,

    thank you for choosing Bento!

    The white space between the menu and the content is intended behaviour and is a combination of the menu height (which is dependent on the menu font size) and the top padding of the content area. There’s no ready setting to change the latter, but you can offset it by adding a custom CSS statement to the “Additional CSS” tab of the “Appearance – Customize” admin section:

    .header-menu { margin-bottom: -30px !important; }

    (don’t forget to save the changes in the Customizer after adding this line!)

    Sincerely,
    Andrii / Satori Studio

    Thread Starter charl1eapple

    (@charl1eapple)

    Thank you Andrii – I had to change it to -80 to get it to be where I wanted it to be. That’s great – many thanks. On the same lines as this, how would I make the submenu box that appears on my one dropdown menu item – it appears so far down and await from the main menu line and I’d like it to be much higher, in fact I’d like the top of the submenu box to be touching the bottom of the menu section.

    And on the same lines again, can you tell me how to remove or reduce the white space between the ‘page title’ and the content (see https://fayreandsquare.org/gallery/).

    Thank you very much!
    Tracy

    Theme Author satoristudio

    (@satoristudio)

    Hey Tracy,

    please find the custom CSS below:

    .primary-menu .sub-menu { top: 90px; }
    .page-id-21 h1.entry-title { margin-bottom: 0 !important; }

    Sincerely,
    Andrii / Satori Studio

    Thread Starter charl1eapple

    (@charl1eapple)

    Hi Andrii,
    Thank you so much for your continued support. This has fixed all my spacing issues and allowed me to add a couple more which I’ve learned based on the code you’ve provided. For the sake of others reading this thread, I did not only want my ‘page-id-21’ to have the spacing adjusted but all pages, this was just an example I gave where you could see the problem. So all I did there was change
    .page-id-21 h1.entry-title { margin-bottom: 0 !important; }
    to
    h1.entry-title { margin-bottom: 0 !important; }

    and it has worked a treat, and allowed me to easily tweak the measurements until they look good.

    Thanks so much – I’m sure I’ll be back soon with a new topic!!
    All the best
    Tracy

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘masthead bottom margin’ is closed to new replies.