Digital Pro – How to Increase Header Padding (top & bottom)

[FunnelJ]

Hey guys,

Just purchased the Digital Pro theme and it's awesome so far!!

I'm not a dev and I want to increase the padding on my header so that the logo image has white space above and below. Can I do this by adding code to the header.php file? and if so, is this likely to break anything or dramatically reduce performance on mobile?

Screenshot example: http://d.pr/i/1eBXN/cUBk26qb

Thanks in advance.

Gary

[hipstershaun]

Go into your style.css file and find the following code,

.site-header {
    background-color: #fff;
    padding: 28px 30px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

The padding is what you need to change. The first number is determining the amount of padding for both the top and bottom of your header. Increase the number, save and then open the home page in a new tab to see the change. Keep changing the number and refreshing the homepage until it has the amount of padding you want.

When you do this it will cause your header to overlap the top of the front page 1 area (the area just under the header). You need to increase that sections top margin by the same amount you increased the padding for the header. so if you increased the header padding from 28 to 38, you've added 10px to both the top & bottom padding for a total increase of 20px. so you would then go to the code below and increase the margin-top value from 90px to 110px.

.front-page-1 {
    display: table;
    margin-top: 90px;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

[Author]

Posts