Social Sharing Icons in Top Bar not working properly

  • Anonymous

    #2483

    My RSS, Facebook, and Youtube Icons are not clickable when you scroll over the majority of them. You have to scroll over the bottom to click it.. Take a look at my page and you will see what I am talking about. http://www.bcfitness.us

    Josh

    #20416

    It is because of your login/register tab at the very top left of your page. It is placed in it’s own div stretching across the entire top area of the page. Your feed links are “hidden” behind this div.

    You can add some padding to your top-bar, but it’s going to increase it’s height.

    Lemme know what direction you want to go with it.

    bcfitness01

    #20417

    Can I make that tab work or would I be better off getting a new plugin? If so, is there one you would recommend?

    Josh

    #20418

    Well, I tried making it work with different z-indexes and such… unsuccessfully.

    I know the floating tabs are cool… but did you know there is a widget which will display login/register features?

    bcfitness01

    #20419

    Yeah I knew I could put a widget in the sidebar but was trying to avoid doing that… what would I need to do to add padding to the top bar?

    Josh

    #20420

    Hey, that looks really good. I like it much better on the side than the top.

    Are you happy with this? Do you still want to explore other options?

    One thing, add this to your child CSS and it will make the bar “stick” to the side so when you scroll, it remains in the same spot, rather than losing it at the top.

    .logintab {
    position: fixed;
    }

    bcfitness01

    #20421

    My only concern with it being on the side is that may be overlooked. I also added a login widget on the sidebar, but am thinking that may be redundant. How hard would it be to add that padding you originally suggested and would it still look good?

    Josh

    #20422

    I don’t think it would be too hard at all.

    Go ahead and throw it back in the top area, and I’ll go play around with it.

    bcfitness01

    #20423

    ok its back on top…

    Josh

    #20424

    Okay, we could do something like this:

    #top-bar {
    background: none repeat scroll 0 0 #000;
    padding-top: 30px;
    }

    Actually, hold on one sec… lemme try something else first.

    Okay, yeah that’s the best I can do with it.

    bcfitness01

    #20425

    Where do I put that code in at? I went to Appearance -> Editor, but dont see a top bar php? Would it be under Header? If so where?

    bcfitness01

    #20426

    I found this…

    #top-bar {

    background: url(images/sprite_h.png) left -196px repeat-x #313130;

    border-bottom:1px solid #222;

    height: 54px;

    position: relative;

    z-index: 10;

    }

    Changed it to this, but it did not fix the problem…

    #top-bar {

    background: none repeat scroll 0 0 #000;

    padding-top: 30px;

    border-bottom:1px solid #222;

    height: 54px;

    position: relative;

    z-index: 10;

    }

    Josh

    #20427

    Have you set up a child theme yet?

    https://forum.graphene-theme.com/graphene-support/how-to-modify-the-theme-using-a-child-theme

    http://codex.wordpress.org/Child_Themes

    You would want to place this adjustment in your child theme style.css file.

    bcfitness01

    #20428

    Got it working, thanks!!

    Josh

    #20429

    My pleasure. Please mark your threads as resolved 🙂

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

You must be logged in to reply to this topic.