• Closed
  • Jodi Lea
    Spectator
    March 6, 2014 at 1:55 pm #8297

    Hey Roman,

    You’ve been great so far with any issues I’ve run across, so I’m hopeful that this time will prove no different! I’m having some mobile issues, and one issue on computer viewing.

    Computer Issue:

    1. On a computer, no matter the browser, I’m getting a barely noticible “box” around my menu items. I’ve tried every combination of color settings I can think of to avoid this, but it remains. Like I said, it’s faint, like a ghosted box around each items, but I’m anal about these things!

    Mobile Issues:

      1. Social icons appears as just dark boxes when viewed on Android phones running latest Jellybean. I haven’t been able to test on iOS yet, but will by end of day today. Any workaround for this so that they show up already colored when the site loads on a mobile device, sans mouseover?

      2. My sticky header looks great on my mobile, but if I scroll down the page and back up repeatedly, the logo on the sticky header decreases in size each time and then disappears altogether after about six up and down page scrolls.

      3. This may be one for my plugin developer, but I’m asking you too – I’m using the Comprehensive Google Maps plugin in lieu of the shortcode included with the theme because I want to have the option for the user to type in a starting point and get directions. My issue is that on mobile, the map shows up, but with no starting marker in place.

    Any and all help will be greatly appreciated and anticipated! Thanks again 🙂

    Jacob Miller
    Spectator
    Posts: 6
    April 24, 2014 at 5:28 pm #9553

    Hey Jodi,
    Since I hi-jacked your thread I thought I’d offer my assistance 😉
    I definitely see what you’re talking about and what Roman said is correct, it’s an effect that has been coded in, but if you would like to change it so that it doesn’t show up at all, here are a couple things you can do.
    First off take a look at lines 243-246 of the style.css file:

    Code:
    #nav ul a:hover,#sticky-nav ul a:hover,
    #nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a, #nav ul ul, #nav li.current-menu-ancestor a,
    #sticky-nav ul .current_page_item a, #sticky-nav ul .current-menu-item a, #sticky-nav ul > .current-menu-parent a, #sticky-nav ul ul, #sticky-nav li.current-menu-ancestor a
    {background:rgba(0,0,0,.02);}

    You’ll notice that last part about the background? If you change that .02 to 0 like this: {background:rgba(0,0,0,0);} It will get rid of the effect completely but it will also get rid of the background effect on all those other menu items, if this is acceptable, then fantastic 🙂
    Or, you can add this to the custom css location in the theme manager.

    Code:
    #nav ul a:hover {background:rgba(0,0,0,0); !important}

    I’ve only tested this as far as utilizing the inspection tools firefox has to offer, if you just want to change the mouse-over effect then the second option will work, if you want to change the background that shows up to tell you what page you’re on and everything else, then use the first option. I hope this makes sense and gives you some direction on what’s going on and I’ll help you as much as I can.
    -Jacob

Viewing 11 replies (of 11 total)