Changing Magazine Header Area

[ambition]

I would like to decrease the space on the top and bottom of the header area (including the header right widget) in the Magazine theme, not the actual header dimensions. How would I go about changing that?

Thank you!

[Davinder Singh Kainth]

1. Open style.css file (backup before making changes, copy contents in a notepad file).
2. Look for following:

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
padding-top: 64px;
padding-top: 6.4rem;
}

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}

3. Above change padding values to adjust spacing.

4. For changing space in widget at top right, change padding value in following code found in style.css file

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 728px;
}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
padding: 40px 0;
padding: 4rem 0;
}

.site-header .widget-area p {
margin-bottom: 0;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

Thanks for your advice. I changed it to the following but nothing changed. Did I not change something that I was supposed to?

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
padding-top: 24px;
padding-top: 6.4rem;
}

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 728px;
}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
padding: 24px 0;
padding: 4rem 0;
}

.site-header .widget-area p {
margin-bottom: 0;
}

[Davinder Singh Kainth]

You need to find the above code and then change padding values to adjust space.

Like

padding-top: 64px;
padding-top: 6.4rem;

Change this to

padding-top: 20px;
padding-top: 2rem;

and so on.

***Note: Remember to change rem values accordingly:

10px = 1rem
40px = 4rem
55px = 5.5rem

Try again.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

Thank you! Okay, I put in this code and it worked for the top but not the bottom. I tried adding a padding for the bottom but it didn't do anything. Is there something I need to add to adjust the bottom padding?

Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
padding-top: 30px;
padding-top: 3.0rem;
}

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}

[Davinder Singh Kainth]

To reduce overall height of the header, reduce 90px of min-height: 90px; in the following code.

/* Logo, hide text */

.header-image .site-header .wrap {
padding: 0;
}

.header-image .site-title a {
background-position: center !important;
background-size: contain !important;
float: left;
display: block;
min-height: 90px;
text-indent: -9999px;
width: 100%;
}

--------------------------------

For more customization, in the following code

Site Header
—————————————————————————————————- */

.site-header {
padding-top: 30px;
padding-top: 3.0rem;
}

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}

Change padding:30px 0; to padding: 30px 0 0 0;
and
padding:3rem 0; to padding: 3rem 0 0 0;

Let me know how it goes!

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

Okay, so I changed it to this and nothing changed. I don't want the actual header changed, just the space from the bottom of the header to the nav bar. So basically I want to change the padding for the bottom. Somehow! lol Again, THANK YOU!

Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
padding-top: 30px;
padding-top: 3.0rem;
}

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0 30px 0;
padding: 3rem 0 3rem 0;
}

[Davinder Singh Kainth]

1. In the above code change

padding: 30px 0 30px 0;
padding: 3rem 0 3rem 0;

to

padding: 30px 0 0 0;
padding: 3rem 0 0 0;

2. Then remove all widget(s) that you have placed in header right area. Save and now check if padding goes away. If yes, then we need to change padding in header right widget section.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

So it looks like header right area needs to be changed. I wasn't sure which was the correct header right widget section.

Thank you once again!

[Davinder Singh Kainth]

1. Look for following code:

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 728px;
}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
padding: 40px 0;
padding: 4rem 0;
}

.site-header .widget-area p {
margin-bottom: 0;
}

2. Change
padding: 40px 0; to padding:10px 0;
padding: 4rem 0; to padding:1rem 0;

Then check!

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

LOL - That did decrease the bottom padding but it also cut off the top of my logo! This is never-ending! But you are so awesome for still sticking with me!

[ambition]

When I adjusted it to 20px and 2rem, it increased the bottom space but showed a little more of the logo. I just want a little padding on the top and bottom of the logo. Any other suggestions?

[Davinder Singh Kainth]

For more padding top / bottom of logo, change padding values for header wrap

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
padding: 3rem 0;
}

Above change 30px 0 and 3rem 0 values. Try 10, 20 and check which final look you want. As such, best option is using firebug or inspect element feature in Google Chrome to find exact class to modify padding values.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

This reply has been marked as private.

[Davinder Singh Kainth]

Hi, I cannot see your private reply. You can email iguiding AT gmail DOT com for follow up

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[ambition]

Thank you so much!

[Author]

Posts