WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: TwentyEleven] Search & Icons in Menu Bar - Links misaligned (1 post)

  1. jahsquare
    Member
    Posted 1 year ago #

    Hello,
    I'm having an issue with a TwentyEleven child here:
    http://theblackberrybelles.com/rbwh/

    The icons and associated links are misaligned - it appears that the link-area width is greater than the icon width... Any help would be much appreciated. Thanks!

    Edit: To clarify, the social media icon link-areas are the issue. They overlap (if you mouse-over the icons you'll see the problem)

    #branding .only-search + #access div {
    padding-right: 35;
    }
    
    #branding #searchform {
    position: absolute;
    width: 150px;
    top: 1em;
    right: 4%;
    text-align: right;
    }
    
    /* Twitter Icon */
    #access .nav-twitter {
    width: 40px;
    text-align: center;
    float: right;
    }
    .nav-twitter,
    #access .nav-twitter:hover >a,
    #access .nav-twitter a:focus
    {
    background: url('images/twitter.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-twitter a
    {
    color: transparent !important;
    padding: 0;
    }
    
    /* Facebook Icon */
    #access .nav-facebook {
    width: 40px;
    text-align: center;
    float: right;
    }
    .nav-facebook,
    #access .nav-facebook:hover >a,
    #access .nav-facebook a:focus
    {
    background: url('images/facebook.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-facebook a
    {
    color: transparent !important;
    padding: 0;
    }
    
    /* Email Icon */
    #access .nav-email {
    width: 40px;
    text-align: center;
    float: right;
    }
    .nav-email,
    #access .nav-email:hover >a,
    #access .nav-email a:focus
    {
    background: url('images/email.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-email a
    {
    color: transparent !important;
    padding: 0;
    }
    
    /* Paypal Icon */
    #access .nav-paypal {
    width: 70px;
    text-align: center;
    float: right;
    }
    .nav-paypal,
    #access .nav-paypal:hover >a,
    #access .nav-paypal a:focus
    {
    background: url('images/paypal.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-paypal a
    {
    color: transparent !important;
    padding: 0;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic