topbar menu not visible on smartphone?
-
[Moderator note: Please don’t uppercase your sentences]
I’ve a problem! I don’t see the menu of the topbar in my smartphone, but before yes…. I only see the search icon…I don’t know why :/
-
Thi is the code of header.php:
<!DOCTYPE html>
<html class=”no-js” <?php language_attributes(); ?>><head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title><?php wp_title(”); ?></title>
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”>
<?php wp_head(); ?>
</head><body <?php body_class(); ?>>
<div id=”wrapper”>
<header id=”header”>
<?php if (has_nav_menu(‘topbar’)): ?>
<nav class=”nav-container group” id=”nav-topbar”>
<div class=”nav-toggle”><i class=”fa fa-bars”></i></div>
<div class=”nav-text”><!– put your mobile menu text here –></div>
<div class=”nav-wrap container”><?php wp_nav_menu(array(‘theme_location’=>’topbar’,’menu_class’=>’nav container-inner group’,’container’=>”,’menu_id’ => ”,’fallback_cb’=> false)); ?></div><div class=”container”>
<div class=”container-inner”>
<div class=”toggle-search”><i class=”fa fa-search”></i></div>
<div class=”search-expand”>
<div class=”search-expand-inner”>
<?php get_search_form(); ?>
</div>
</div>
</div><!–/.container-inner–>
</div><!–/.container–></nav><!–/#nav-topbar–>
<?php endif; ?><div class=”container group”>
<div class=”container-inner”><div class=”group pad”>
<?php echo alx_site_title(); ?>
<?php if ( ot_get_option(‘site-description’) != ‘off’ ): ?><p class=”site-description”><?php bloginfo( ‘description’ ); ?></p><?php endif; ?>
</div><?php if (has_nav_menu(‘header’)): ?>
<nav class=”nav-container group” id=”nav-header”>
<div class=”nav-toggle”><i class=”fa fa-bars”></i></div>
<div class=”nav-text”><!– put your mobile menu text here –></div>
<div class=”nav-wrap container”><?php wp_nav_menu(array(‘theme_location’=>’header’,’menu_class’=>’nav container-inner group’,’container’=>”,’menu_id’ => ”,’fallback_cb’=> false)); ?></div>
</nav><!–/#nav-header–>
<?php endif; ?></div><!–/.container-inner–>
</div><!–/.container–></header><!–/#header–>
<div class=”container” id=”page”>
<div class=”container-inner”>
<div class=”main”>
<div class=”main-inner group”>An this is the style.css:
/* header : nav topbar
/* ———————————— */
#nav-topbar.nav-container { background: #ff00a4;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #ff00a4;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #ff00a4; color: rgba(255,0,164,0.7); }
@media only screen and (min-width: 1025px) {
/* fixed nav */
.full-width.topbar-enabled #header { padding-top: 50px; }
.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
.full-width.admin-bar #nav-topbar.nav-container { top: 32px; }
}
@media only screen and (min-width: 720px) {
/* common */
#nav-topbar .nav { }
#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
/* level 1 */
#nav-topbar .nav > li { border-right: none; }
#nav-topbar .nav > li > a:hover,
#nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
#nav-topbar .nav li > a:hover,
#nav-topbar .nav li:hover > a,
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-menu-ancestor > a,
#nav-topbar .nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
#nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; }
#nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
#nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
}
@media only screen and (max-width: 719px) {
/* common */
#nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
/* level 1 */
#nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }
}
- The topic ‘topbar menu not visible on smartphone?’ is closed to new replies.