WordPress.org

Ready to get started?Download WordPress

Forums

How do I remove white space under nav bar? (20 posts)

  1. mooredesign
    Member
    Posted 1 year ago #

    I have tried everything in the forums to remove the white space between my nav bar and the content of my page with no success. If anyone can help, I'll try anything at this point. Thx!

    This is the site I'm working on: http://www.sendelldesigngroup.com

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Post here the code you have tried.

  3. mooredesign
    Member
    Posted 1 year ago #

    This is all I have in my CSS. I have tried changing the padding on everything I could find with a value. I also changed the single entry styles. Basically the same stuff that's in the forum. Sorry I can't be more specific, but I have tried and deleted so many.

    /*
    Theme Name: sendell
    Description: twentyeleven child
    Author: Moore Design Graphics
    Template: twentyeleven
    */

    @import url("../twentyeleven/style.css");

    .page-id-4 .entry-title { display: none; }
    .page-id-2 .entry-title { display: none; }
    .page-id-24 .entry-title { display: none; }
    .page-id-22 .entry-title { display: none; }
    .page-id-5 .entry-title { display: none; }

    #branding #searchform {
    display: none;
    }

    #branding {border-top: 0;}

    #access {
    background:none repeat scroll 0 0 #FFFFFF;
    color:#000000;
    box-shadow: none;
    clear: both;
    display: block;
    text-align: center;
    margin: 0 auto 6px;
    width: 100%;
    }
    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display: inline-block;
    text-align: center;
    }
    #access li {
    text-align:center;
    position: relative;
    }
    #access a {
    color: #333;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    }
    #access ul ul {

    display: none;
    text-align:center;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    #access ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #666;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    background: #FFF;
    }
    #access li:hover > a,
    #access a:focus {
    background: none;
    color: #666;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: bold;
    }

    body {
    font-size: .7em;
    text-align: center;
    }

    /* IPAD FIXES */
    @media (max-width: 960px) {
    /* Simplify the basic layout */
    #main #content {margin: 2em auto;}

    @media (max-width: 960px) {
    /* @media (max-width: 960px) Reduce font-sizes for better readability on smaller devices */
    body, input, textarea {}

    img.alignleft { margin-right:10px; }

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    When working in Child Themes, the idea is to create styles that override the parent theme. That's probably why you haven't succeeded in modifications to your Child Theme stylesheet.

    Use a tool like Google Chrome's Inspector to find which CSS is applying padding to which elements.

    Then define new styles in your Child Theme to override these padding styles. I.e

    .class {
     padding: 0;
    }
  5. mooredesign
    Member
    Posted 1 year ago #

    <div class="menu">

      <li class="current_page_item">Home<li class="page_item page-item-2">About<li class="page_item page-item-24">Contact<li class="page_item page-item-22">Portfolio<li class="page_item page-item-59">Testimonials<li class="page_item page-item-5">Services
    </div>

    This is the code from the page. It calls the nav bar class=menu, but I don't find any .menu styles in the native twentyeleven CSS to change or override.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Look for margins and other elements (such as the main <div> and <article> element) too.

  7. mooredesign
    Member
    Posted 1 year ago #

    .singular.page .hentry {
    padding:0;
    }

    Changing padding to 0 (above) took some space out of Safari using Firebug, but when I added that to the child CSS there was no difference.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I'm not seeing it in your child theme stylesheet
    http://www.sendelldesigngroup.com/wp-content/themes/sendell/style.css

    Did you remove it?

  9. mooredesign
    Member
    Posted 1 year ago #

    I just added it along with some other style changes that haven't worked. I think it may have something to do with <article id="post-4" class="post-4 page type-page status-publish hentry"> but I'm not sure what.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you removed it again?

    Try using more specific CSS selectors.
    E.g

    #main .singular.page .hentry {
     padding:0;
    }
  11. mooredesign
    Member
    Posted 1 year ago #

    The main div looks like a blank space holder. Not sure if I could delete it or comment it out of the php file...

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Probably not a good idea as it contains the entire page content... But it does have top padding that you want to get rid of.

    The padding in that area is coded into 4 places in the regular CSS file --lines 754, 1086, 1091 and 684.

  13. mooredesign
    Member
    Posted 1 year ago #

    Thanks WPyogi. I just added all of the code above into my child CSS and changed the padding value to 0, but nothing moved. Any other ideas?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your CSS changes aren't saving properly.

  15. mooredesign
    Member
    Posted 1 year ago #

    That's what I was thinking. I am making changes in the style sheet and clicking update. I am using Safari on a Mac. Should I try a different browser? Thanks for your help. I am so close to finishing this and it just doesn't look right with the big white gap!

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  17. mooredesign
    Member
    Posted 1 year ago #

    Thanks. I was missing a closing }

  18. mooredesign
    Member
    Posted 1 year ago #

    I closed the {} but the W3C Validator still found an error. So I deleted the code just to see if I really needed it and when I updated everything moved up and looks perfect. Thank you! I never would have checked the code if you hadn't found the error.

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yeah, validating both HTML and CSS is always a good troubleshooting step. Only thing is that many themes show errors -- but they are not really problematic but more an issue of browser differences or changing standards -- so you have to know what to worry about and what not to. Glad you persisted and got it sorted out. It's a really nice looking site, BTW.

  20. mooredesign
    Member
    Posted 1 year ago #

    Thank you :)

Topic Closed

This topic has been closed to new replies.

About this Topic