How to adjust the height of the top navigation bar and banner

[祁同伟]

[NateDhaliwal]

You can’t do this normally, but can do so with CSS, but it really depends on what height you want. May I ask, what is the reason for this? Thanks.

[祁同伟]

The top navigation bar is too tall relative to the logo and avatar.

The banner height is also a bit too tall relative to the text height.

Could you provide me with the CSS code to modify these, if possible?

[NateDhaliwal]

Hi there, which banner are you referring to? Thanks.

[ToddZ]

I’ll take a guess is that “banner” means the header bar:

…which you should be able to change like this (choose your own height and units):

header.d-header {
  height: 50px;
}

And maybe “top navigation bar” is the topic menu:

…which you can change like this:

section.navigation-container {
  height: 40px;
}

[祁同伟]

Global Notice

[ToddZ]

If you inspect the global notice banner with browser devtools, you can see the div has an id and some classes:

It normally gets the padding, which affects the banner size, from the .alert class:

But you can override that just for the Global Notice, like this:

#global-notice-alert-global-notice {
  padding: .2em .5em .2em .5em;
}