Archived topic
Vertical non sliding header on the right side
35 replies · Started by Harris on October 7, 2018
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 :)
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
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;
}
Thanks! Can you please also give me the selector of the header widget so I can also adjust the margins there?
This:
.header-widget
Thanks a million David!
(I should have suggested the selector's name) :)
Glad to be of help :)
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)
You should be able to do this:
.inside-header {
height: 100%;
box-sizing: border-box;
}
.header-widget {
margin-top: auto;
}
Doesn't seem to be working 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.
No, not at all. You can check it live at the site
Hm... Seem to be working now.
Thanks
maybe a cache issue. glad you got it working
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
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;
}