Support » Theme: Shoreditch » Can I reduce height of menu bar?

  • prosperarachel

    (@prosperarachel)


    I have used other answers from this forum to reduce the white space above the header, but I still have a lot of padding in the menu bar under the text. I’m looking on a desktop in Chrome and all my versions are up to date. What CSS could I use to reduce the height of the menu bar itself please?

    Many thanks

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • fresatomica

    (@fresatomica)

    Hi there!

    You can try this to remove the bottom padding:

    .site-header {   
        padding-bottom: 0;
    }
    Thread Starter prosperarachel

    (@prosperarachel)

    Thanks @fresatomica. I had a value of 1 em in there before and tried changing it to 0 then 100 to see what happened, but I didn’t see any effect either way. Is there likely to be something else interacting with it?

    Jerry B

    (@jerrysarcastic)

    Hi @prosperarachel to clarify did the CSS that @fresatomica gave not work for you? If so, you may want to try cropping your logo to remove any extra “whitespace” around the graphic.

    You can see in the screenshot here, there is extra empty white space above and below the logo itself: https://d.pr/i/Hvp3R4

    To explain, the height of your logo is making the header taller than it needs to be. So if you crop out the extra whitespace in your logo (to make it less tall) the site header itself will also reduce in height.

    Hope this helps point you in the right direction!

    Thread Starter prosperarachel

    (@prosperarachel)

    Hi @jerrysarcastic
    I already had code the same as @fresatomica but with a value of 1 em instead of 0. Changing the value didn’t affect the look of the page at all that I could see.

    Thank you for your idea about the logo. It’s normal to add white space within logo images to keep the padding to the correct amount. But I have now cropped the bottom of my logo and it does help, although there is still 1cm of white space below it, above the grey line separating the bottom of the menu from the rest of the page.

    Exploring further I have found that
    .main-navigation {
    margin-top: 0.1em;
    }
    affects the top margin of the menu, but margin-bottom: 0 em; doesn’t make any difference to the bottom of it.

    Any more ideas gratefully received…

    Hello there,

    Happy to help you with this.

    although there is still 1cm of white space below it, above the grey line separating the bottom of the menu from the rest of the page.

    The CSS to add to change this is:

    
    .site-header {
        padding-bottom: 1.5em;
    }
    

    1.5em is the default there, so this would be adjusted to suit your needs.

    I hope this helps.

    Thread Starter prosperarachel

    (@prosperarachel)

    Thanks @aleone89. Sadly I already have that code in place and have messed with the value, but the site is still not behaving as I want.

    Jerry B

    (@jerrysarcastic)

    Hi there,

    One thing to be aware of is that our theme is mobile-responsive to allow it to fit on tablets/smartphones, so it adapts it’s layout based on the size of the screen you are viewing your site on.

    The issue is that as more and more space is taken out via CSS, the more problems you may see on smaller screens because the CSS is not responsive. You can see here that already the amount of space that is taken out is causing some problems in the tablet size. Video at this link: https://d.pr/v/3r1GAn

    Mobile responsive CSS is outside of the scope of support we are able to provide for this free theme, due to the amount of code that is involved in correcting all the possible sizes your site may be displayed at. At this point I recommend hiring the services of a professional designer to help you craft the CSS you need to make these changes to your site. Let us know if you have any questions.

    Thread Starter prosperarachel

    (@prosperarachel)

    @jerrysarcastic Thanks for taking the time to do this, I appreciate it. I do have a min-width parameter in my css so the changes only take effect on wider screens, and it is looking okay on both my tablet (portrait and landscape) and phone. I’d prefer to risk losing a little of the heading if people happen to be just in the wrong size spot for the window, in order to make it better for the majority of people.

    My core problem is trying to get enough information “above the fold” to retain attention when items like the headers are quite large relative to the rest of the page. However, I like the rest of the theme and am very grateful for all the assistance you all give here.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Can I reduce height of menu bar?’ is closed to new replies.