Navigation Bar not showing on my phone
-
Hello, I am having trouble getting my nav bar to show when viewing my site on my phone. It shows on my PC, but not on my Galaxy III, I also had a friend try on their iPhone, still not showing. Have no idea where to even began troubleshooting. If anyone could help it would be greatly appreciated. My theme is TwentyThirteen.
https://www.toriberry.com/blog
Thank you in advance.
Chinelo
-
Interesting issue, I noticed the menu does show up on an IPhone if you use the url
https://toriberry.com
, however if you add the /blog, then the menu does not show up.Using the url https://toriberry.com, the menu item “home” uses the following class specifier:
<td class="nav"><a href="index.html" class="nav">Home</a></td>
Using the url you specified:
https://toriberry.com/blog
, the same button shows:<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="https://toriberry.com/">Home</a></li>
I suspect you created a mobile menu, and assigned a different class to the menu. Have a look at your menu definition.
Hope this helps,
— JimWell, I am not php trained anyway you can take a look for me. I am also havig an issue with the bottom nav bar not going across the length of the websie when view on my phone?
Thanks
ChineloChinelo,
I had another look at your page/site, and noticed you are also using some type of pinterest or social plug-in (I think). I would disable all other plugins, and test. I would then enable any plug-ins, one at a time and then test. This may identify if any plug-in is creating the problem.
— JimThanks Jim, but this was an issue before I added the social media. Any other suggestions?
Thanks
ChineloThis is my chid theme functions php, wondering if I put my code in the wrong place. As mentioned above I am not php trained. Thanks in advance!
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(), array( ‘parent-style’));
}
/*
adding footer menu, second nav to child theme
*/
register_nav_menus( array(
‘primary’ => __( ‘Primary Menu’, ‘CHILDTHEMENAME’ ),
‘secondary’ => __( ‘Secondary Menu’, ‘CHILDTHEMENAME’),
) );?>
Chinelo,
Hmmm, you did not mention you were using a child theme initially. I created a child theme using the code you provided, and it appeared to work ok. I suspect you have additional code in your child theme that you have not provided.I would suggest, (1) select standard theme, not your child theme, (2) disable all plug-ins, (3) one at a time, enable the plug-ins and test. The entire process should only take a few minutes. You do not need to un-install the plugins or the child theme to perform this testing.
> …but this was an issue before I added the social media…
Ok, so it may be something else.— Jim
When you created the child them, did you place anything in the header.php file in your child them folder. Also, the code above is copied my functions.php from my child theme exactly how it is in my folder. Does it look right?
> … header.php …
No, you did not provide any header.php. The minimum child theme does not require a header.php.> … does it look right?
Well, it is valid php code, so from that perspective it does look right. Not knowing the rest of the code I have no idea if it is right.Again, I would suggest: (1) select standard theme, not your child theme, (2) disable all plug-ins, (3) one at a time, enable the plug-ins and test.
I would also suggest you find a wordpress programmer to assist you with this problem. I believe your issue may be beyond the scope of the forum.
Twenty Thirteen is designed to hide the navigation menu on smaller screens and reveal it only when you press the “Menu” button. In your child theme, you’ve hidden the “Menu” button but the navigation menu remains hidden. You need to unhide the navigation menu:
ul.nav-menu, div.nav-menu > ul { display: block; }
Thank you so much Stephen. That did the trick!! I know I am suppose to open another thread, but since you know the Twenty Thirteen so well, wondering if you could help me out with a couple other things?
First: I have horizontal lines within my bottom nav bar, I cannot find the code to change the color to match the links?
Second: This doesn’t seem to be an issue on the iPhone but on my Galaxy when I link to the Blog, I have to zoom out quite a bit. Is there something I can adjust so to fix that?
Thank you for all your help!
ChineloCan you clarify which horizontal lines you’re referring to? I see your menu: “Home | About Me … Blog | Contact Me”, but the lines separating the links seem to be the same color as the links themselves.
As for your second question, I don’t own a Galaxy, unfortunately. I noticed you’ve removed the
<meta name="viewport">
tag from the header; if you put it back, does it look right on the Galaxy:<meta name="viewport" content="width=device-width">
Hi Stephen …after taking a look at my header.php file the meta name “viewport” is included, Any other suggestions:
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id=”main”>
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?><!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) & !(IE 8)]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”https://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head><body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>
” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
<h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<div id=”navbar” class=”navbar”>
<nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>
<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></button>
“><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
<?php get_search_form(); ?>
</nav><!– #site-navigation –>
</div><!– #navbar –>
</header><!– #masthead –><div id=”main” class=”site-main”>
- The topic ‘Navigation Bar not showing on my phone’ is closed to new replies.