Reduce gap between secondary navigation menu and header

[nomad_jess]

Hi there,

I am trying to reduce the gap between my secondary navigation menu and header image to increase the amount of content I have "above the fold". I have already cropped the image to eliminate unnecessary white space in the image itself. Not having much luck locating the necessary code to tweak this.

Can anyone be of assistance?

Many thanks in advance,

Jess

http://notesofnomads.com

[AnitaC]

Look for this in your style sheet - change 32px to 0 (zero)

.site-container {
    background-color: #fff;
    margin: 32px auto;
    max-width: 1140px;
    overflow: hidden;
    padding: 36px;
}

That will bring it up.

---

Need help with customization or troubleshooting? Reach out to me.

[nomad_jess]

Hi Anita,

Thanks so much! This has brought it up a little, but I'd still like to bring it up more.

Is there some code related to the secondary navigation menu perhaps that is causing the additional padding?

Many thanks in advance!

[AnitaC]

The secondary navigation is as wide as it should be. In the code above, you can reduce the top padding. Maybe change the code to this:

.site-container {
    background-color: #fff;
    margin: 0 auto;
    max-width: 1140px;
    overflow: hidden;
    padding: 10px 36px 36px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[nomad_jess]

Thanks Anita! That worked a treat!

May I inconvenience you with one other thing here? Or should I start a new thread?

I'm wanting to reduce the gap between the header and primary navigation too. Could you please point me in the direction of the code that affects this?

Thanks so much!

[AnitaC]

You don't have much to work with there or it will become smooshed, but you can reduce the padding here:

.site-inner {
    clear: both;
    padding-top: 36px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[nomad_jess]

Hi Anita,

Thanks so much! This helped but unfortunately didn't adjust it as much as I would have liked.

In the end, I was able to get the result I wanted by changing this code:

.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
line-height: 1;
margin: 0 0 16px;
text-transform: uppercase;

to

.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
line-height: 1;
margin: 0 0 0px;
text-transform: uppercase;
}

Thanks so much for all your wonderful help, Anita! Much appreciated!

[AnitaC]

You're welcome. Please mark this resolved.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts