Reduce Header & Menu Height

Hey @morts81

You can try to add the following CSS.

#main-nav {
    margin: 0 auto;
    padding: 0;
}

#logo {
    padding: 13px 0 13px 0;
}

On a couple of side notes:
– Most of the size of the header is because you’re using a large image for the logo.
– You need to check your Google Map API Key

Let me know if you need more help

Thanks so much for this, it’s certainly helped to bring the header size down.

The menu bar below however still seems to be limited by the search bar, or similar. Ideally I’d like to have this half the height (with text smaller if necessary) and then all the pull down menu’s would also be shorter.

Any ideas how to close the loop?

@morts81

No problem,

Ok, just remove whatever you added before and add the code below instead. That should be closer to your desired effect.

.navbar-nav a {
    padding: 0px 35px 0 0;
}

#search {
    padding: 0 10px 0 0;
    margin: 0 auto;
}

#main-nav {
    margin: 0 auto;
    padding: 0;
}

#logo {
    padding: 5px 0 5px 0;
}

.navbar-toggle {
    padding: 0 13px;
}

Let me know if it still needs a nudge here or there.

• This reply was modified 7 years, 9 months ago by j09.

You are a champion kind sir.

Thanks for the help and the prompt response.

@morts81

You’re welcome and I’m glad you got it sorted out.