Wordpress导航:徽标右侧,左侧导航

时间:2016-04-06 10:45:44

标签: wordpress twitter-bootstrap

我使用Wordpress和基于Bootstrap的模板构建了这个website。这个模板顶部有一个导航,我需要的是“反转”品牌(标识)和导航。基本上我需要将徽标向右浮动并向左导航。

我通过CSS尝试过但不起作用。

任何提示?

感谢您的建议

编辑:导航代码

<div class="navigation" role="banner">
<div class="secondary-navigation">
<div class="container">
<div class="contact">
</div>
<div class="user-area">
<div class="actions">
</div>

</div>


</div>
</div>  

<div class="container">
<header class="navbar" id="top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav" href="http://w-liestal.nowcommu.myhostpoint.ch/" title="Un nuovo sito targato WordPress" rel="home"><h1 class="site-title">W-Liestal</h1><h2 class="site-description">Un nuovo sito targato WordPress</h2></a>
</div>
<nav class="primary-navigation collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation" aria-label="Primary Navigation">
<ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item"><a href="http://w-liestal.nowcommu.myhostpoint.ch/">Home</a></li>
<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://#">Architektur</a></li>
<li id="menu-item-60" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://#">Ausstattung</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/wohnen/">Wohnen</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/lage/">Lage</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/kontakt/">Kontakt</a></li>
</ul>       
</nav>  
</header><!-- /.navbar -->
</div><!-- /.container -->
</div><!-- /.navigation -->
<!-- end Navigation -->

1 个答案:

答案 0 :(得分:0)

案例1:

这是你可以做的:

1 - 将CSS代码放在一个单独的文件(mystyle.css)中,并将其保存在主题目录中。

2 - 将以下代码放在你的函数php中:

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

案例2:  你的Css版本问题,

安装插件wpquerystringmodifier增加版本。 (简单的方法)

其他方面,找到functions.php文件和搜索样式。

 wp_enqueue_style( 'style-name', get_stylesheet_uri(),null,1.1.1,true );