Homepage › Community Forums › Epik Theme Support › Header dimensions
Hello,
I’d like to add some ‘breathing room’ above my logo as it appears in my site’s header.
Could you please advise me how to achieve this?
A temporary log-in is provided below.
Many thanks!
Susie
In the meantime I have tried a workaround by increasing the canvas size above my logo in Photoshop, but the logo is now aligning with the top edge of the larger header space rather than the bottom edge. Could you please advise how I reposition the logo to the bottom?
Thank you,
Susie
What is the link to your site?
I didn’t see a link/theme that was created by Appfinite
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
@SusieQ FYI when you post in Private only Moderators can view your posts. Regular members/customers can’t see what you’re posting. You would only need to use the Private Reply Option when adding a user/password or a link, other than that, you’ll need to post regularly. I had to contact a Moderator to figure out what you wrote.
To answer your question, in order to push the navigation down more, you can add more space to it on line 1996 in your Style.css file –
.header-image .site-header .widget-area {
padding: 16px 0;
padding: 2.5rem 0;
}
It’s recommended to remove the rem
line – padding: 2.5rem 0;
and just use px
instead. Just adjust the px
to whatever looks good to you, and that should be it. Here is an example you can start with –
.header-image .site-header .widget-area {
padding: 140px 0;
}
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Brilliant, thank you Eric. That worked just fine, except that I now have too much empty space *below* the logo and primary navigation items. Can you please advise me how to reduce this? (And yes, I’m aware that private posts are only viewed by moderators; I mistakenly thought you were one! Apologies.)
Susie
Since Eric probably hasn’t seen this just yet, let me go ahead and jump in since I know you’re on a deadline…
The Extra space looks like it was added to this part of the CSS around line 1996 –
.header-image .site-header .widget-area {
padding: 150px 0;
}
If you reduce the padding, it will take away some of the space. That code (150px) handles both the Top and Bottom of the CSS. If you want to control them separately then you need to add something like this –
.header-image .site-header .widget-area {
padding: 150px 0 100px;
}
The first one (150px) is the top padding/space, the second (0) is the left and right (together, equally) and the 3rd (100px) is the bottom. These are shortcuts, so you can control those parts of the padding by adjusting the pixels that way. If you need to adjust each side independently (top, right, bottom, left) then let me know and I’ll give you the code to do it.
You’re Welcome!