Space between header and navigation menu in Agency Pro

Community Forums Forums Design Tips and Tricks Space between header and navigation menu in Agency Pro

This topic is: resolved

This topic contains 19 replies, has 3 voices, and was last updated by  Chris Moore 9 months, 4 weeks ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #81839

    amzzzg
    Participant
    Post count: 16

    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/
    #81841

    Sridhar Katakam
    Participant
    Post count: 1050

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

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

    #81842

    amzzzg
    Participant
    Post count: 16

    Thank you Sridhar! So much.

    #81878

    Chris Moore
    Participant
    Post count: 136

    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

    #81880

    Chris Moore
    Participant
    Post count: 136

    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

    #81882

    amzzzg
    Participant
    Post count: 16

    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.

    #81887

    Chris Moore
    Participant
    Post count: 136

    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

    #81890

    amzzzg
    Participant
    Post count: 16

    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. :)

    #81891

    Chris Moore
    Participant
    Post count: 136

    “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

    #81892

    amzzzg
    Participant
    Post count: 16

    LOL! Thank you!

    #81893

    Chris Moore
    Participant
    Post count: 136

    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

    #81897

    amzzzg
    Participant
    Post count: 16

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

    #81899

    Chris Moore
    Participant
    Post count: 136

    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

    #81900

    amzzzg
    Participant
    Post count: 16

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

    #81901

    Chris Moore
    Participant
    Post count: 136

    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

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.