我最初有一个 bootstrap css 样式的 WordPress 主页，此后我将其转换为 Foundation css。我本来想开发一些看起来完全像这样的东西:
但我不一定需要那个BLOG |白色导航菜单上方青色栏上的登录部分。我以为我可以去掉顶部导航菜单，但我明白了:
我只想要其中没有菜单的蓝绿色条。
这是我在 header.php 中的内容:
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package UpAbility
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'upability' ); ?></a>
<!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
<!-- NAVBAR ====================================================================================== -->
<div class="top-nav">
<div class="row">
<div class="columns large-6 medium-6">
<ul id="menu-topmenu" class="top-list-right">
<?php wp_nav_menu( array(
'theme_location' => 'topnav',
'container' => 'nav',
'menu_class' => 'nav navbar-nav navbar-right'
) );
?>
</ul>
</div>
</div>
</div>
<div class="top-bar">
<div class="top-bar-left">
<a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
</div>
<div class="top-bar-right">
<ul class="menu">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right'
));
?>
</ul>
</div>
</div>
</header>
<div id="content" class="site-content">
这是 style.css 文件的一部分:
/* Top Nav */
.top-nav {
width: 100%;
background: #219CD7;
padding: 0;
margin: 0;
}
.top-list-right {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
float: right;
li {
list-style: none;
float: left;
padding: 10px 15px;
font-size: 13px;
}
a {
color: #ffffff;
}
}
/* Top Bar */
.top-bar {
}
我没有发布整个内容，因为它是通过 underscores.me 生成的，因此 style.css 有超过 300 多个位置
最佳答案
使用以下功能列出您的菜单。通过这种方式，您可以为导航菜单创建自定义 html。
<?php
function showMyMenu($menu)
{
$navData = wp_get_nav_menu_items($menu);
?>
<ul class="nav navbar-nav navbar-right is-hidden">
<?php
foreach($navData as $k => $v)
{
echo '<li><a class="page-link" href="' . $v->url . '"> ' . $v->title . ' </a></li>';
}
?>
</ul>
<?php } ?>
关于jquery - 如何在没有导航栏的情况下在基础中创建此功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43358849/