[Resolved] Vertical non sliding header on the right side

[David]

1. So, are you going to add a logo or just use the site branding?
2. You can add them as Elementor Library widgets to the Header Widget 🙂

[Harris]

1. I am going to use a logo
2. Oh! Too many new (or kind of new) things in GP. I keep forgetting them!

Thanks

[David]

CSS for space below logo and / or space below site branding should work:

/* space below logo */
.site-logo {
    margin-bottom: 2em;
}

/*space below branding */
.site-branding {
    margin-bottom: 2em;
}

[Harris]

Thanks! Can you please also give me the selector of the header widget so I can also adjust the margins there?

[David]

This:

.header-widget

[Harris]

Thanks a million David!
(I should have suggested the selector’s name) 🙂

[David]

Glad to be of help 🙂

[Harris]

One more question (hope last) 🙂
Is it possible to “stick” the header widget at the bottom of the header no matter what the screen height? (in desktop mode only)

[David]

You should be able to do this:

.inside-header {
    height: 100%;
    box-sizing: border-box;
}
.header-widget {
    margin-top: auto;
}

[Harris]

Doesn’t seem to be working David

[David]

Is it not working at all? I edited the code above to add a box-sizing property to stop the side header from expanding larger than the screen.

[Harris]

No, not at all. You can check it live at the site

Hm… Seem to be working now.
Thanks

[David]

maybe a cache issue. glad you got it working

[Harris]

This side header gives a lot of trouble… 🙂
There is a menu option that breaks in 3 lines (3 words, each word fits in a line).

Is there some way to control the gap between those lines without affevting the gap between the other menu elements?

(the “problematic” menu choice is the second one if you waht to have a look at it)

Thanks

[David]

In the Dashboard > Appearance > Menus > Screen Options, Check CSS Classes. Then you can give that menu item a custom class e.g reduced-menu-height

then something like this:

.reduced-menu-height a {
    line-height: 1.3em;
}

[Author]

Posts