Skip to:
Content
Pages
Categories
Search
Top
Bottom

My Login/Register buttons not working on a tablet or mobile

  • Avatar of YvonneTaylor
    YvonneTaylor
    Participant

    @yvonnetaylor

    I am using the latest WP and Buddypress updates.
    When I view my website on a laptop/desktop the community Login and Register buttons work fine. http://www.thedogsclub.com
    However if I use a tablet or mobile, the words Login and Register are in the correct place however the clickable link is not, so when you click on Login nothing happens and when you click on Register you get the Login screen.
    I was told to add the following code into Appearance>CSS which I did but the problem is still there.
    }
    body > div.container_24.container > div.grid_24.header > div:nth-child(1) {
    max-width: 100%;
    }
    .header img {
    max-width: 100%;
    }

    I have asked this on WordPress and on my ThemeĀ“s forum but no one is offering any help.
    Can some kind person out there help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Avatar of BuddyBoss
    BuddyBoss
    Participant

    @buddyboss

    I don’t have a quick fix, but your theme is doing some odd things. Instead of loading links it’s loading an image map and making part of the image map clickable, I guess to allow for a custom font (an image looking font) for the login/register. This is not going to work well in a responsive setup where the page is skinnier than the design was intended for.

    Any chance you can get the theme developer to ditch the image map and replace the Login/Register with more traditional links? It would make this very easy to fix.

    Avatar of YvonneTaylor
    YvonneTaylor
    Participant

    @yvonnetaylor

    Hi Buddyboss

    It was my original web designer who made the header image for me as an image map. Ok, if I remove the image map and just have a .jpg image for my logo on the left how do I get the Login and Register links on the right, and for them to work ok on desktop or tablet. The theme that I am using is Colorway responsive pro which resizes okay for everything else.
    Many thanks

    Avatar of BuddyBoss
    BuddyBoss
    Participant

    @buddyboss

    Ok so, first delete the image map.

    Then in the file header.php in your theme, you can add this code:

    <!-- Register/Login links for logged out users -->
    <?php if ( !is_user_logged_in() ) : ?>
    <div class="header-login">
    <a href="<?php echo wp_login_url( $redirect ); ?>" class="button">Login</a>
    <?php if ( bp_get_signup_allowed() ) : ?>
    <a href="<?php echo bp_get_signup_page(); ?>">Register</a>
    <?php endif; ?>
    </div>
    <?php endif; ?>

    Basically it first checks to see if the user is NOT logged in.
    If that condition is met (user is logged out) then it displays a link to Login and then a link to Register (if registration is open).

    I put the whole thing into a DIV element called .header-login which you can used to style the section via CSS. At first it may not look like much – just two links. You or your developer will need to edit the CSS. Maybe if you get it working correctly but it looks bad, you can come back to the forums here and post again about how to style it.

    Avatar of YvonneTaylor
    YvonneTaylor
    Participant

    @yvonnetaylor

    Hi Buddyboss

    Apologises for the delay in responding, everything is working fine now, removed the image file and used traditional links.

    Many thanks for your help
    Regards

    Avatar of BuddyBoss
    BuddyBoss
    Participant

    @buddyboss

    No problem. Glad to hear it’s all working now.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.