How to decrease top/bottom padding above/below logo in Dusk 2 theme?

[tillkrueger]

Hi everyone, hope you're having a peaceful lead-up to the Holidays.

I have spent hours scouring the CSS files of the Dusk 2 theme to try to find the place that influences how much space is shown above & below the logo and navigation in the Dusk 2 theme. Would anyone be able to tell me what I have to modify in which CSS file?

This is what I am talking about (the space shown with the red arrows in the screencap:

[BJ5 · Accepted solution]

Hmm. let's try it with a different selector:

<style>

.dusk-header .container { height: 60px !important; }

body.sticky-nav-on .site-canvas { padding-top: 60px !important }

</style>

[Adam7]

Can you post a link to your site, @tillkrueger? That'll help our Community members figure out what you need to change.

[tillkrueger]

Oh, of course, my bad:

https://censoprano.weebly.com

thanks Adam,

Till

[BJ5]

This should shrink that for you on the published site if you put in Settings > SEO > Header code:

<style>

@Media screen and (min-width: 1025px)

{

.nav-wrap > container { height: 90px !important; }

body.sticky-nav-on .site-canvas { padding-top: 90px !important }

}

</style>

You can change 90 to a different number if you want; just make sure both are the same number.

[tillkrueger]

Thanks so much for that, BJ!

I did what you instructed me to do and first changed both of those values to 20px, then to 0px, but both changes showed no difference whatsoever in the publishes site.

Why would that be the case?

[BJ5]

Was it not working on your published site after publishing?

[tillkrueger]

Unfortunately not, BJ.

This is the published site with the 0px settings:

https://censoprano.weebly.com

[tillkrueger]

I should add that I just added another SEO Header Code snippet (to make the blog dates fully transparent as a way to hide them), which is also not having any effect.

It's curious that *both* additions don't have any effect. Is there something that needs to be done for the site to respect the Header Code additions, or should they "just work"?

[BJ5]

Hmm... Try it like this instead:

<style>
.nav-wrap > container { height: 0px !important; }
body.sticky-nav-on .site-canvas { padding-top: 0px !important }
.blog-date { color: transparent !important; }
</style>

[tillkrueger]

Thanks for checking back in, BJ!
Still no effect though, unfortunately.

[BJ5]

Is the code still on your site or did you remove it? I checked to see what it was doing but wasn't sure.

[tillkrueger]

All I did was to copy the code you suggested into the SEO header field, and republished the site.

I did not remove any code, no.

[BJ5 · Accepted solution]

Hmm. let's try it with a different selector:

<style>

.dusk-header .container { height: 60px !important; }

body.sticky-nav-on .site-canvas { padding-top: 60px !important }

</style>

[tillkrueger]

EUREKA! You did it, BJ! 😄
That did the trick, and for some reason, it also fixed my other padding issue, above the content.

Wow, that really had been weighing heavily on my mind, not being able to find a fix.

Really appreciate it, BJ. I can now finally move on and show my client where we are without having to start with "But please ignore the...".

Well, that was a very welcome late Christmas gift, and I wish you and yours a healthy and peaceful transition into the New Year.

May 2020 bring you and everyone here closer to your happy place!

[tillkrueger]

Not to sound greedy, but now that the top navigation is vertically slimmer, the sub-menus still appear where they would have before this change.

Is there an easy way to move them up closer to their parents?

Or better yet, do you or anyone here know of some sort of navigation plugin that gives us a bit more style/freedom than the included sub-menu system?

[BJ5 · Accepted solution]

'Tis the season, as they say!

<style>

.dusk-header .container { height: 60px !important; }

body.sticky-nav-on .site-canvas { padding-top: 60px !important }

body.more-nav-on .desktop-nav .wsite-menu-item { height: 60px !important; line-height: 60px !important }

</style>

[tillkrueger]

Holy moly, BJ, how thee rock!

Wish I had your CSS prowess, I tell ya that much.
Thanks again, brother, for those gifts

May it come back manyfold to you in the New Year!

[BJ5]

Hey no prob! CSS is much easier than you think! I'm just self-taught.