How can I create space above the logo?

Diana

Active member
The logo is too near the top. I want to create some space above the logo.

I tried "Height of Header Logo" but that affects the navbar.
 
I played with this for awhile and finally just added some space (transparent) to the top of my logo. I'm sure there's a much better way but this was the easiest.
 
Search your templates for smth like this:

#logo
{
line-height: {xen:calc '@headerLogoHeight + 0'}px;
*line-height: {xen:calc '@headerLogoHeight + 0 '};
height: {xen:calc '@headerLogoHeight + 0 '}px;
}
 
and change the values + add a margin property, e.g:

#logo
{
line-height: {xen:calc '@headerLogoHeight + 0'}px;
*line-height: {xen:calc '@headerLogoHeight + 0 '};
height: {xen:calc '@headerLogoHeight + 0 '}px;
margin-top: -15px;
}
 
Thanks everyone.

justadam, I tried what you said. It had the opposite effect. It gave me less space at the top and moved the navbar up with it, like so.

header.webp

Code:
#logo img {
margin-top: 10px;
}

You may need to add !important to the css rule.

I tried that in the header.css, didn't change anything.

Where would I add "important?"
 
Add that to the EXTRA.css, it works on my install. You may have something else conflicting with it.

Code:
#logo img {
margin-top: 10px !important;
}
 
Thanks everyone.

justadam, I tried what you said. It did the opposite, it gave me less space at the top and moved the navbar up with it, like so.

Yup, i ve put minus in to margin-top: -15px; ( a lil mistake) :) If you will change it to margin-top: 50px; (or more) this will give you what you want. Nad yes, as Qwk86gn said, use extra.css to add this value, eg:

#logo img {
margin-top: 50px !important;
}
 
Nope, tried it both ways, neither of them makes the change.

I should probably tell you that this is on a landing page, with a page node, created in a child style. So maybe I need to put an id number somewhere?
 
Top Bottom