Space between header and navigation menu in Agency Pro

[amzzzg]

I accidentally created a space between the header and the navi menu in Agency Pro. I don't know how or where I did this. I moved the social icon widget to the header widget and when I title the social icons the black of the header meets the black of the navigation menu. However, when I remove the title of the social icons ( I don't want a title just the little icons) a gap appears. I don't know what I've changed to create this gap. Can someone please advise me? Thank you in advance. http://www.thebloomsms.com

http://thebloomsms.com/

[Sridhar Katakam]

Add the following at the end of child theme's style.css:

.site-container {
    padding-top: 60px;
    padding-top: 6rem;
}

---

Genesis Tutorials | Follow me on Twitter

[amzzzg]

Thank you Sridhar! So much.

[Chris Moore]

Hello there!

Just had a look at your site. Not sure what you have done in terms of custom CSS as of yet (didn't dig that deep), but you may want to consider changing the z-index for the header.

.site-header {
z-index: 0;
}

That way the little owl will show. 🙂

I still think there is some work to be done up there, but maybe that insight will help.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Chris Moore]

Actually, I take that back. Seems you have a fixed header. 😉 Just noticed when I scrolled down.

Like I said, more work to do. 🙂

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

I do have a fixed header but not intentionally. It is on my list to correct. I don't actually want it to keep coming down the page when you scroll. Will the first suggestion you made make that fixed header stay at the top and not come down during the scroll? I do want the little owl to show on ipad-- I'm trying to figure out that part now. He shows on desktop and cell phone but is cut off on iPad.

[Chris Moore]

Hmmm... Let's see here. Try this:

.site-header {
position: inherit;
}

.site-container {
padding-top: 0px;
padding-top: 0px;
}

Make sure that is at the bottom of the child theme'sstyle.css. You might do well to clean up and delete the former codes given as well.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

Hey thanks a lot! That worked! This is the first time I've worked with the new Agency, I'm having little hiccups with the header and then that part you just fixed for me and the size of the sidebar widgets is killing me! I've been on the search for three days to figure out how to decrease them. Thanks for your help and saving the little owl's head too. 🙂

[Chris Moore]

"No owls were hurt in this CSS fix..." 😉

Please let me know if you need further assistance.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

LOL! Thank you!

[Chris Moore]

Also, you may want to do this, so that the "owl menu" is not sooooo high. It has to be higher than the rest, because of the owl, but at least you can collapse it a little bit. Try this:

li#menu-item-123 a { 
padding-top: initial; 
}

You could then probably remove that thin blue line that you added at the top.

Just a thought... 😉

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

Very nice, thank you. He did drop a little bit.

[Chris Moore]

Actually, there's a little problem with that last fix. It caused the sub-nav items (for the owl nav) to have a space between them. Thinking about this for a second... 😉

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

I may need to clear my cache I don't see an abnormal amount of space on the sub...

[Chris Moore]

Boom!!! This one instead:

li#menu-item-123 > a {
padding-top: 0px;
}

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Chris Moore]

Ohhh, and that "line" at the top, well, it isn't a line after all! It's the background creeping through (I'm on Chrome on a Mac).

You have "padding-top: 1px" at the top. Needs to be this:

.site-container {
padding-top: 0px;
padding-top: 0rem;
}

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

Sweet I changed it for the owl! Yes it is a pin stripe of the background, it was a block before. So much of a difference from the original agency- this is a fun theme!

[Chris Moore]

Okay, just to double-check.. here's the final code (delete all else that was given):

.site-header {
position: inherit;
}

.site-container {
padding-top: 0px;
padding-top: 0rem;
}

li#menu-item-123 > a {
padding-top: 0px;
}

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[amzzzg]

Check, got it and saved it. Thank you so much for your time and help!

[Chris Moore]

No problem! My pleasure.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Author]

Posts