Support ForumResponsive Social Icon Nav Not Displaying Correctly – Support Forum

Responsive Social Icon Nav Not Displaying Correctly

Cathy — Tue, 14 Apr 2015 16:45:10 +0000

(sorry for all of the questions!)

When my phone (android) displays my website, the responsive social icons at the top do not display correctly. They shrink down to what I assume would be a pop-over navigation (similar to the main nav), however, when I try to tap/click/select them on my phone or computer (when the browser is very narrow), nothing happens.

Here is my site: https://www.inthelittle.com/

Is this a result of settings I need to change within the theme options, or is this an error of some sort?

Thanks for looking into this!
Cathy

Reply To: Responsive Social Icon Nav Not Displaying Correctly

IshYoBoy — Wed, 15 Apr 2015 04:12:42 +0000

Hi Cathy,

The social icons are hidden by default on mobile devices and only a button for the Header bar navigation is shown.

We need to hide the “menu” button (“hamburger” icon) and display and center the icons. However, you need to remember that if you ever decide to display a menu in the Header Bar, visitors will not be able to access it as we’re hiding the button which triggers it.

To change it you can use the code below and add it to the “Custom CSS” field available under Theme Options -> General Options (since we still have the access we added it there so go check it out):

/*************************************************/
/*        APPLIED ONLY ON MOBILE DEVICES          */
/*************************************************/
@media (max-width: 480px){

	/* Center the icons in the top bar */
	.ish-part_header_bar .ish-hb-social {
		display: block;
	    float: none;
	    text-align: center;
	}
	
	/* Hide the button for opening the menu. If Menu used in the header bar visitors will not be able to access it without this button */
	.ish-part_header_bar .ish-hb-right {
		display: none;
	}
	
}

/*************************************************/

/* APPLIED ONLY ON MOBILE DEVICES */

/*************************************************/

@media (max-width: 480px){

/* Center the icons in the top bar */

.ish-part_header_bar .ish-hb-social {

display: block;

float: none;

text-align: center;

}

/* Hide the button for opening the menu. If Menu used in the header bar visitors will not be able to access it without this button */

.ish-part_header_bar .ish-hb-right {

display: none;

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Responsive Social Icon Nav Not Displaying Correctly

Cathy — Wed, 15 Apr 2015 14:46:11 +0000

That is perfect! Thank you so much for going above and beyond and taking care of it for me. :)

Reply To: Responsive Social Icon Nav Not Displaying Correctly

IshYoBoy — Thu, 16 Apr 2015 04:26:14 +0000

Sure thing!

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market