Social icons not opening in new window / drop menu not visible in mobile

Sparkling
1

Hi Movin! 2 questions:

  1. How do I enable the social icons to open a new window when clicked? Currently they load in the same parent window.

  2. Upon viewing my site on mobile, the dropdown menu is not working. Any idea?

The site is: lucyjunus.com/wp

Thanks!
Mark

2

Hi Mark,

I hope you are well today and thank you for your questions.

1. How do I enable the social icons to open a new window when clicked? Currently they load in the same parent window.

You can achieve this by checking the option “Open link in a new tab” in your social icons menu screen as shown in the attached screenshot.

2. Upon viewing my site on mobile, the dropdown menu is not working. Any idea?

I could confirm the issue on your site which is causing due to to custom CSS code added on your site.

You can try resolving this issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

#page .navbar-default .navbar-collapse {
    padding: 0;
    overflow: hidden;
}
#page .nav.navbar-nav {
    padding: 0;
    float: left;
}

Best Regards,
Movin

3

Hi Movin,

Sorry for the late reply. I tried looking for the social icons menu in the Appearance/menus as shown in your attachment. However, I don’t have a social icons menu in my menus. Any leads?

Thanks,
Mark

4

Then how are you displaying the social icons on your site?

Have you performed the following steps to create it?

  1. Create a menu like any other menu in the admin area of your site under Appearance -> Menus .
  2. Use the correct urls in the menu items, so for twitter it must be twitter.com for facebook it must be facebook.com. Otherwise URLs won’t get recognized and you will get squares without icons.
  3. Set theme location for this menu as “Social Links”
5

Hi Movin!

Sorry for the late response. Regarding the social icons, no, I went a different route to create it to get a custom icon included. My client wanted a Houzz icon link and I couldn’t find one in the set that was included. I probably found my solution to it in another post or Aigars helped me. Not sure, but I know I didn’t write it myself since I’m a WP newbie.

I inserted the code you sent regarding the drop down sub menu. However, its still not working. Do you know which custom CSS is in conflict? I loaded the colorlib.com/sparkling/ page and the drop down menu works fine on my iPhone. Sorry.

Any leads is greatly appreciated!
Mark

6
I inserted the code you sent regarding the drop down sub menu. However, its still not working. Do you know which custom CSS is in conflict? I loaded the colorlib.com/sparkling page and the drop down menu works fine on my iPhone. Sorry.

Try clearing your iPhone browser cache.

I couldn’t find that custom CSS code as you have disabled right click on your site so please enable it until we troubleshoot this issue.

7

Hey Movin,

The custom css that was affecting viewing of the nav menu on mobile was from some code I inserted to pad the nav menu. When on mobile, this code totally pushed the nav off view. I deleted that code and its fine, but the dropdown didn’t work. (This is where you mentioned to reinsert the code and we could troubleshoot.

I searched on other posts regarding the dropdown menu issue and one solution was to disable the Easy Bootstrap plugin. After I did that, the dropdown menu is working on mobile now.

Thanks!

8

Glad it’s working fine for you now :slight_smile:

9

Hi Movin,

I have been troubleshooting the menu dropdown issue for mobile via online mobile simulators and they all appear fine (the dropdown menu works). However, I was just notified that on the actual mobile device, particularly ipad and ipad mini, they don’t work. I thought it was an isolated issue so I went to the Apple store and tried on their devices. It doesn’t work there too. I appreciate all your effort on this. Do you have any thoughts on how to proceed?

Thanks!

10

UPDATE - I checked on www.responsinator.com as you suggested to another user, and it works. But on the actual iPad and iPad mini it doesn’t. I also checked with these other mobile device emulators and they all seem to work:
http://quirktools.com/screenfly/
http://responsivepx.com
http://mobt.me/MFIN

Also tested on Firefox responsive design view in browser

One difference between most emulators and the actual devices is how you navigate the drop down menu. On the emulators, you hover over the menu to activate the drop down (with the exception of the mobt.me site). However on the actual device, you need to touch/click the menu to activate the drop down. When I touch/click the menu on the iPad/iPad mini, the top menu is highlighted, but no drop down menu appears.

11

UPDATE - Movin, while I was waiting for your response, I dug into some forum posts to see if I could further troubleshoot on my side. I disabled each plug-in one by one to see if (as another user suggested) duplicate js loads on page. That didn’t work, so I moved on.

Since the drop down works on the colorlib.com demo, I thought if some custom CSS is the culprit. Sure enough, after I disabled one by one, this was the problem:

article .entry-content {
margin-top: 0;
}

Since it looks like a z-index problem, I tried several possible solutions that were posted in the forum and this worked:

nav.navbar.navbar-default {
z-index: 9999;
}

So, it looks like the drop down menu was working but was covered up by the content area!

12

Awesome great to see you got that resolved.

Please advise if you have more questions.

Have a fantastic day!