[gnome-web-www: 26/68] Add Bootstrap's navigation menu
- From: Tom Tryfonidis <tomtryf src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-web-www: 26/68] Add Bootstrap's navigation menu
- Date: Tue, 24 Jan 2017 15:49:23 +0000 (UTC)
commit cff9015f0dcf0d3ccb221ae4fc72cf9b4fca14ec
Author: Tom Tryfonidis <tomtryf gnome org>
Date: Mon Jan 9 16:56:57 2017 +0200
Add Bootstrap's navigation menu
theme/header.php | 109 +++++++++++------------------
theme/style.css | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 245 insertions(+), 70 deletions(-)
---
diff --git a/theme/header.php b/theme/header.php
index 13ce0d6..89977a8 100644
--- a/theme/header.php
+++ b/theme/header.php
@@ -19,7 +19,6 @@ if (function_exists('wppo_get_lang')) {
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php
bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title><?php wp_title('-', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="icon" type="image/png" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.png" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
@@ -44,78 +43,52 @@ if (function_exists('wppo_get_lang')) {
<!-- accessibility access -->
<div id="accessibility_access">
<ul>
- <li><a href="#container"><?php _e( 'Go to page content', 'grass' ); ?></a></li>
- <li><a href="#top_bar"><?php _e( 'Go to main menu', 'grass' ); ?></a></li>
- <li><a href="#s" onclick="$('#s').focus(); return false;"><?php _e( 'Go to the search field',
'grass' ); ?></a></li>
+ <li><a href="#container"><?php esc_html_e( 'Go to page content', 'grass' ); ?></a></li>
+ <li><a href="#top_bar"><?php esc_html_e( 'Go to main menu', 'grass' ); ?></a></li>
+ <li><a href="#s" onclick="$('#s').focus(); return false;"><?php esc_html_e( 'Go to the search
field', 'grass' ); ?></a></li>
</ul>
</div>
-<!-- Donation ruler for when we run campaigns
-<script type="text/javascript" src="https://static.gnome.org/friends/ruler/ruler-privacy.js";> </script>
--->
-<!-- global gnome.org domain bar -->
-<div id="global_domain_bar">
- <div class="maxwidth container">
- <div class="tab">
- <a class="root" href="http://www.gnome.org/";>GNOME.org</a>
- </div>
- </div>
-</div>
-
- <header class="container">
- <div class="col-md-12">
- <div class="mobile-menu">
- <div class="navbar navbar-default">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target=".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" title="<?php _e( 'Go to home page',
'grass' ); ?>" href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('stylesheet_directory');
?>/images/gnome-logo.png" alt="<?php echo _e('GNOME: The Free Software Desktop Project', 'grass');?>" /></a>
- </div>
-
- <div class="collapse navbar-collapse">
- <div class="top_bar col-md-9">
- <?php wp_nav_menu('menu=globalnav'); ?>
-
- <div class="mobile-search col-md-8">
- <form role="search" method="get" id="searchform" action="<?php echo
home_url('/'); ?>" >
- <div>
- <label class="hidden" for="s"><?php _e( 'Search', 'grass' ); ?>:
</label><input type="text" class="mobile-menu-text" value="<?php if(isset($_GET['s'])) { echo
htmlspecialchars(stripslashes(strip_tags($_GET['s']))); } ?>" name="s" id="s" placeholder="<?php _e(
' Search', 'grass' ); ?>" />
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div> <!-- mobile-menu end -->
-
- <div class="normal-menu">
- <div id="gnome_header" class="col-md-3">
- <h1><a title="<?php _e( 'Go to home page', 'grass' ); ?>" href="<?php echo
home_url('/'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gnome-logo.png" alt="<?php
echo _e('GNOME: The Free Software Desktop Project', 'grass');?>" /></a></h1>
- </div>
+ <!-- Donation ruler for when we run campaigns
+ <script type="text/javascript" src="https://static.gnome.org/friends/ruler/ruler-privacy.js";> </script>
+ -->
- <div class="top_bar col-md-7 pull-left">
- <?php wp_nav_menu('menu=globalnav'); ?>
- </div>
-
- <div id="top_bar_search" class="col-md-2 pull-right">
- <div class="right">
- <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>" >
- <div>
- <label class="hidden" for="s"><?php _e( 'Search', 'grass' ); ?>: </label>
- <input type="text" value="<?php if(isset($_GET['s'])) { echo
htmlspecialchars(stripslashes(strip_tags($_GET['s']))); } ?>" name="s" id="s" placeholder="<?php _e(
'Search', 'grass' ); ?>" />
+ <header class="gnome-header">
+ <nav class="navbar navbar-fixed-top navbar-default affix-top">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-wrapper" aria-expanded="false">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar top-bar"></span>
+ <span class="icon-bar middle-bar"></span>
+ <span class="icon-bar bottom-bar"></span>
+ </button>
+ <a id="home-link" class="gnome-navbar-brand" title="<?php esc_attr_e( 'Go to home
page', 'grass' ); ?>" href="<?php echo esc_url( home_url( '/' ) ); ?>">
+ <img src="<?php bloginfo('stylesheet_directory'); ?>/images/gnome-logo.svg"
alt="GNOME: The Free Software Desktop Project">
+ </a>
+ </div>
+ <div class="navbar-collapse collapse" id="navbar-wrapper">
+ <?php
+ wp_nav_menu( array(
+ 'menu' => 'primary',
+ 'theme_location' => 'primary',
+ 'depth' => 2,
+ 'container' => 'false',
+ 'container_class' => 'collapse navbar-collapse',
+ 'container_id' => 'bs-example-navbar-collapse-1',
+ 'menu_class' => 'nav navbar-nav',
+ 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
+ 'walker' => new WP_Bootstrap_Navwalker())
+ );
+ ?>
+ <form id="searchform" method="get" class="navbar-form navbar-right" action="<?php echo
esc_url( home_url( '/' ) ); ?>" role="search">
+ <label for="navbar-search" class="sr-only"><?php esc_html_e( 'Search:', 'grass' );
?></label>
+ <div class="form-group has-feedback has-feedback-left">
+ <span class="form-control-feedback"><i class="fa fa-search"
aria-hidden="true"></i></span>
+ <input type="text" class="form-control" name="s" id="navbar-search" value="<?php
if(isset($_GET['s'])) { echo htmlspecialchars(stripslashes(strip_tags($_GET['s']))); } ?>" placeholder="<?php
esc_attr_e( 'Search', 'grass' ); ?>"/>
</div>
</form>
</div>
</div>
-
- </div> <!-- normal-menu end -->
- </div>
- </header>
-
-<div class="clearfix"></div>
+ </nav>
+ </header>
diff --git a/theme/style.css b/theme/style.css
index c530a34..974a481 100644
--- a/theme/style.css
+++ b/theme/style.css
@@ -136,9 +136,9 @@ a:visited {
/* ========================================================================== */
-
+.gnome-header,
#header {
- margin-top: 20px;
+ margin-bottom: 40px;
}
#header img {
vertical-align: middle;
@@ -164,6 +164,18 @@ a:visited {
opacity: 0.85;
}
+.gnome-navbar-brand {
+ height: 50px;
+ padding: 6px;
+ float: left;
+ outline: 0;
+ margin-left: 7px;
+}
+.gnome-navbar-brand img {
+ max-height: 35px;
+ min-height: 35px;
+ min-width: 35px;
+}
/* Top bar */
/* ========================================================================== */
@@ -303,7 +315,197 @@ a:visited {
margin-top: 5px;
}
+/* Main Navigation Menu */
+/* ========================================================================== */
+
+.navbar-default {
+ background-color: #4a86cf;
+ border-color: #3968a1;
+}
+.navbar-default .navbar-brand {
+ color: #ffffff;
+}
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+ color: #ffffff;
+}
+.navbar-default .navbar-text {
+ color: #ffffff;
+}
+.navbar-default .navbar-nav > li {
+ margin-left: 10px;
+}
+.navbar-default .navbar-nav > li > a {
+ color: #ffffff;
+ text-decoration: none;
+}
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+ color: #ffffff;
+ background: rgba(100%, 100%, 100%, 0.2);
+}
+.navbar-default .navbar-nav > li > .dropdown-menu {
+ background-color: #4a86cf;
+}
+.navbar-default .navbar-nav > li > .dropdown-toggle .caret{
+ display: none;
+}
+.navbar-default .navbar-nav > li > .dropdown-toggle .dropdown-header{
+ padding: 0px;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
+ color: #ffffff;
+ text-decoration: none;
+ font-size: 13px;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
+ color: #ffffff;
+ background-color: #3968a1;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
+ background-color: #3968a1;
+}
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+ color: #ffffff;
+ background-color: #3968a1;
+}
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+ color: #ffffff;
+ background-color: #3968a1;
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+ color: #ffffff;
+ background-color: #3968a1;
+}
+.navbar-default .navbar-toggle {
+ border-color: #3968a1;
+}
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+ background-color: #3968a1;
+}
+.navbar-default .navbar-toggle .icon-bar {
+ background-color: #ffffff;
+}
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+ border-color: transparent;
+}
+.navbar-default .navbar-link {
+ color: #ffffff;
+}
+.navbar-default .navbar-link:hover {
+ color: #ffffff;
+}
+
+/* Searchform on Navbar */
+/* ========================================================================== */
+
+#navbar-search {
+ background-color: transparent;
+ color:#fff;
+ border: none;
+ border-radius: 0;
+ transition: none;
+ box-shadow: none;
+ padding: 8px 8px 8px 40px;
+}
+#navbar-search:focus {
+ background-color: rgba(100%,100%,100%,0.1);
+}
+
+/* Color for search's placeholder text*/
+
+#navbar-search::-webkit-input-placeholder {
+ color: #fff;
+}
+#navbar-search::-moz-placeholder {
+ color: #fff;
+}
+#navbar-search::-ms-placeholder {
+ color: #fff;
+}
+#navbar-search::placeholder {
+ color: #fff;
+}
+
+/* CSS hack to align search icon with the text*/
+.fa.form-control-feedback {
+ line-height: 34px;
+}
+.has-feedback-left input.form-control {
+ padding-left: 34px;
+ padding-right: 12px;
+}
+.has-feedback-left .form-control-feedback {
+ left: 0;
+}
+.form-horizontal .has-feedback-left .form-control-feedback {
+ left: 12px;
+}
+.form-control-feedback {
+ color: #fff;
+ background-color: #4a86cf;
+}
+
+/* Animated "Close" icon on Navbar */
+/* ========================================================================== */
+
+.navbar-toggle {
+ border: none;
+ background: transparent !important;
+}
+.navbar-toggle:hover {
+ background: transparent !important;
+}
+.navbar-toggle .icon-bar {
+ width: 22px;
+ transition: all 0.2s;
+}
+.navbar-toggle .top-bar {
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform-origin: 10% 10%;
+ -webkit-transform-origin: 10% 10%;
+ -ms-transform-origin: 10% 10%;
+}
+.navbar-toggle .middle-bar {
+ opacity: 0;
+}
+.navbar-toggle .bottom-bar {
+ transform: rotate(-45deg);
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform-origin: 10% 90%;
+ -webkit-transform-origin: 10% 90%;
+ -ms-transform-origin: 10% 90%;
+}
+.navbar-toggle.collapsed .top-bar {
+ transform: rotate(0);
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+}
+.navbar-toggle.collapsed .middle-bar {
+ opacity: 1;
+}
+.navbar-toggle.collapsed .bottom-bar {
+ transform: rotate(0);
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+}
+.navbar-form,
+.navbar-collapse {
+ box-shadow: none;
+}
/* Foundation Navigation Menu */
/* ========================================================================== */
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
