Jump to content
Sign in to follow this  

Primary nav not showing links in mobile devices

Recommended Posts


My child theme is not displaying properly in mobile devices.  I have a hook added to display my social icons on the nav bar.  It displays properly on larger screens but does not work on smart phones.


URL: http://millfairselfstorage.com



body.fixed_width .section-branding .content-pad {
	padding: 15px;
  	background-color: #f15200;
.section-navbar .content-pad {
padding-top: 5px;
padding-bottom: 5px;
  background-color: #f15200;
.searchform { display: none; }


In child functions.php:

add_action('get_search_form', 'social_icons');	function social_icons(){ ?>
		<div class="icons" align="right" style="bottom: 12px; right: 1px; margin-top: 5px; float: right;
	width: 35%;">
			<a target="_blank" href="http://www.facebook.com/pages/Millfair-Self-Storage/292791334076271?fref=ts" class="facebooklink"><img src="http://millfairselfstorage.com/wordpress/wp-content/themes/pagelines/sections/branding/facebook.png" alt="Facebook"></a>
			<a target="_blank" href="#" class="youtubelink"><img src="http://millfairselfstorage.com/wordpress/wp-content/themes/pagelines/sections/branding/youtube.png" alt="Youtube"></a>
			<a target="_blank" href="#" class="gpluslink" style="opacity: 0.8; "><img src="http://millfairselfstorage.com/wordpress/wp-content/themes/pagelines/sections/branding/google.png" alt="Google+"></a>
	<script type="text/javascript"> 
		jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.8);});
<?php }



Do you recommend creating a theme for mobile devices? Help.

Share this post

Link to post
Share on other sites
James B

Hi there,


The icons are appearing inside the nav on the mobile version, but as you've placed them inside the nav the first tab 'home' is spanning the width of the section and covering the icons. So when you try to push an icon, its triggering the homepage.


Using browser specific css you can target the mobile version of the site and either change the z-index of the icons, to move them to the top. Or change the width of the buttons in the menu so they don't cover the icons fully.


You can download our free browser specific css plugin here = http://www.pagelines.com/store/plugins/browser-css/

and find out more on using the plugin here - http://support.pagelines.me/docs/plugins/browser-specific-css/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this