parent
0562f3f63e
commit
48bae3a81b
5 changed files with 145 additions and 88 deletions
|
@ -1,6 +1,4 @@
|
|||
<header id="page-header">
|
||||
<div class="header-collumns">
|
||||
<?php include(TEMPLATEPATH . '/components/logo.php'); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
|
||||
</div>
|
||||
<?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/logo.php'); ?>
|
||||
</header>
|
||||
|
|
|
@ -1,10 +1,46 @@
|
|||
<div class="navbar-area">
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a>';
|
||||
}
|
||||
?>
|
||||
<a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a>
|
||||
</div>
|
||||
<nav class="toolbar flex-that">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar">
|
||||
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="btn btn-navbar">
|
||||
Catégories <i class="fa fa-caret-down" aria-hidden="true"></i>
|
||||
<ul class="card-menu">
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'name',
|
||||
'order' => 'ASC'
|
||||
) );
|
||||
|
||||
foreach( $categories as $category ) {
|
||||
if ($category->slug != "blog" && $category->slug != "chapters") {
|
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
|
||||
}
|
||||
}?>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
|
||||
}
|
||||
?>
|
||||
<li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
|
@ -312,9 +312,10 @@ register_taxonomy('roman', 'post',
|
|||
function wpb_custom_new_menu() {
|
||||
register_nav_menus(
|
||||
array(
|
||||
'top-navbar' => __( 'Top Navbar' ),
|
||||
'link-menu' => __( 'Links Menu' ),
|
||||
'footer-pages' => __( 'Footer pages' ),
|
||||
'top-navbar' => __( 'Navbar (gauche)' ),
|
||||
'top-navbar-2' => __( 'Navbar (droite)' ),
|
||||
'link-menu' => __( 'Liste des liens' ),
|
||||
'footer-pages' => __( 'Pages dans le footer' ),
|
||||
'social' => __( 'Reseaux sociaux' )
|
||||
)
|
||||
);
|
||||
|
|
|
@ -33,44 +33,8 @@
|
|||
#page-header {
|
||||
background: $color-skyblue url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid $color-dark2;
|
||||
padding-bottom:3rem;
|
||||
|
||||
.header-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"logo";
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
.navbar-area {
|
||||
grid-area: nav;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo nav";
|
||||
height:11*$lineheight;
|
||||
padding-bottom:0;
|
||||
.navbar-area {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
height:13*$lineheight;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
padding-top: .75rem;
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
|
@ -81,11 +45,13 @@ header h1 {
|
|||
font-style:oblique;
|
||||
padding-bottom:0px;
|
||||
line-height: 1.5em;
|
||||
max-width: 1600px;
|
||||
margin: auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
width: 600px;
|
||||
height: auto;
|
||||
margin-top:0.75rem;
|
||||
margin-top:0rem;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover {
|
||||
|
@ -93,6 +59,51 @@ header h1 {
|
|||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
margin:auto;
|
||||
padding:0;
|
||||
max-width: 1600px;
|
||||
z-index:2;
|
||||
|
||||
ul {
|
||||
display:flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
position:relative;
|
||||
z-index: 2;
|
||||
ul {
|
||||
display:none;
|
||||
position:absolute;
|
||||
left:-0.75rem;
|
||||
background-color:$color-light2;
|
||||
padding: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
ul {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
margin:0rem;
|
||||
margin-left:0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
|
73
style.css
73
style.css
|
@ -606,34 +606,9 @@ th {
|
|||
#page-header {
|
||||
background: #2aa198 url("img/background.png") center bottom repeat-x;
|
||||
border-top: 6px solid #073642;
|
||||
padding-bottom: 3rem; }
|
||||
#page-header .header-collumns {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
max-width: 1600px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "nav" "logo";
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.5rem;
|
||||
padding-bottom: 1.5rem; }
|
||||
#page-header .header-collumns .navbar-area {
|
||||
grid-area: nav;
|
||||
text-align: center; }
|
||||
#page-header .header-collumns .logo-area {
|
||||
grid-area: logo; }
|
||||
@media (min-width: 992px) {
|
||||
#page-header .header-collumns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo nav";
|
||||
height: 16.5rem;
|
||||
padding-bottom: 0; }
|
||||
#page-header .header-collumns .navbar-area {
|
||||
text-align: right; } }
|
||||
@media (min-width: 1600px) {
|
||||
#page-header .header-collumns {
|
||||
height: 19.5rem; } }
|
||||
padding-top: .75rem;
|
||||
padding-bottom: 1.5rem; }
|
||||
|
||||
header h1 {
|
||||
border-style: none !important;
|
||||
color: #fdf6e3;
|
||||
|
@ -641,14 +616,50 @@ header h1 {
|
|||
font-size: 5.4em;
|
||||
font-style: oblique;
|
||||
padding-bottom: 0px;
|
||||
line-height: 1.5em; }
|
||||
line-height: 1.5em;
|
||||
max-width: 1600px;
|
||||
margin: auto; }
|
||||
header h1 img {
|
||||
width: 100%;
|
||||
width: 600px;
|
||||
height: auto;
|
||||
margin-top: 0.75rem; }
|
||||
margin-top: 0rem; }
|
||||
header h1 a, header h1 a:visited, header h1 a:hover {
|
||||
background-color: transparent; }
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
max-width: 1600px;
|
||||
z-index: 2; }
|
||||
.toolbar ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.toolbar ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
.toolbar ul li ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -0.75rem;
|
||||
background-color: #eee8d5;
|
||||
padding: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
|
||||
z-index: 2; }
|
||||
.toolbar ul li:hover ul {
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
.toolbar .btn-navbar {
|
||||
margin: 0rem;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem; }
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
|
Reference in a new issue