WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Gap between menu and header (22 posts)

  1. chris-wyatt
    Member
    Posted 1 year ago #

    Hi there.

    Im a newbie. Have created a child and updated my version of wordpress and now my menu bar is not connected to my header. there is a 50-100 pixel white gap between.

    Have went through entire css and removed all padding pixels to 0 and followed all the other threads on this topic. Including reducing the size of header and playing around with the pixel parameters on css- which only led to entire page changing length.

    I change the original twenty ten css in each case, as on my child the editor only shows the link to twenty ten css.

    I am probably being dumb and not changing childs css directly may be the cause??

    I would really appreciate any help with this problem

    Cheers

  2. chris-wyatt
    Member
    Posted 1 year ago #

  3. Phil
    Member
    Posted 1 year ago #

    Open style.css (line 351)

    Paste this instead of it.

    #site-title {
        float: left;
        font-size: 30px;
        line-height: 36px;
        margin: 0;
        width: 700px;
    }

    Remove the 18px margin by pasting in the above.

    Phil

  4. chris-wyatt
    Member
    Posted 1 year ago #

    Cheers, I have done that, but didn't change.

    I think actually when I removed the original title by using <!-- --> keys (as I use the header as title). By hiding them, it has caused the gap to appear. So will try going through my code again. But thanks for your help

  5. chris-wyatt
    Member
    Posted 1 year ago #

    As I edited my header.php in child. Hiding the code for the title

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try adding this to your child theme style.css file:

    #site-title {
        margin: 0;
    }

    Don't make changes to your parent style.css file (or any other) -- as they will be deleted when WP is updated.

  7. piyushgoyal1
    Member
    Posted 1 year ago #

    can we add adsense code in the gap btw header??
    i am trying to add on bestugcnetcoaching.com

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @piyshgoyal1 - if you need help, please start your own thread. It's rude to interrupt another person's thread unless you are contributing in answering his/her question.

  9. chris-wyatt
    Member
    Posted 1 year ago #

    Thanks for that advice, I have replaced

    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>-->
    
    					</span>
    				<!--</<?php echo $heading_tag; ?>>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>-->

    with

    <!--<a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>-->
    
    					</span>
    				<!--</<?php echo $heading_tag; ?>>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

    And now back to normal, except I still have the Title problem, will follow another solution to getting rid of it, and hopefully it wont move the menu bar as well

  10. chris-wyatt
    Member
    Posted 1 year ago #

    sorry only just saw you comment WPyogi. Did that change suggested but not effective, because I changed the header php file. Hiding the code for the title. That has caused this, I realise now. Thank you for your help. I will try another solution to getting rid of title text :)

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, what are you trying to remove? Using display: none; in your CSS may be the easiest approach.

  12. chris-wyatt
    Member
    Posted 1 year ago #

    Right, I was trying to remove my title on all pages, as my header has my logo and title. Used the remove keys as it was posted on another forum, but caused the gap as well in my case. Will try the display none suggestion

  13. chris-wyatt
    Member
    Posted 1 year ago #

    Sorry to be a pain, but what would I need to write on the style sheet to specify removing the title from all pages. Have just looked at a few other forums, but haven't been sucessful yet

    Still looming horribly over header :)

  14. chris-wyatt
    Member
    Posted 1 year ago #

    #header a{
    color: #b6e1fe;
    display: none;
    }

    Used this, but it got rid of my menu bar as well as the title above header

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try this:

    h1#site-title {
       display: none;
    }
  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Also remove the other code you have in your child style.css file - it's not valid CSS.

  18. chris-wyatt
    Member
    Posted 1 year ago #

    Thats great, both solutions work. Although not on all pages for the code, has just done for home page. And have removed all the other code I put in :)

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    See if taking the h1 off of the CSS above fixes it on all pages.

  20. chris-wyatt
    Member
    Posted 1 year ago #

    YEP, thats amazing. Thank you so much. Have been pulling hair out for days over that lol

  21. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    LOL - glad to! A great tool for CSS work is Firebug -- it shows you the relevant CSS for an element and then you can copy that code to your child stylesheet and make the necessary changes.

  22. chris-wyatt
    Member
    Posted 1 year ago #

    Great, will have a look into that, I have a lot to learn,,, clearly. lol

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags