sterntours/trunk/app/Resources/views/default/components/header.html.twig
Kevin Adametz 645ea5da7d new Header
2019-12-12 19:53:40 +01:00

930 lines
No EOL
27 KiB
Twig

<style>
/*
Top Bar
*/
#topBar {
display:block;
background-color: rgba(80, 80, 80, 0.1);
border-bottom:rgba(0,0,0,0.05) 1px solid;
color:#777;
}
/* Links */
#topBar ul.top-links {
float:left;
margin:0;
}
#topBar ul.top-links>li {
padding:0;
display:inline-block;
margin-left:-3px;
position:relative;
border-right:rgba(0,0,0,0.1) 1px solid;
}
#topBar ul.top-links>li:hover >.dropdown-menu,
#mainMenu ul.top-links>li:hover >.dropdown-menu {
display:block !important;
}
#topBar ul.top-links>li .dropdown-menu {
z-index:3000;
}
#topBar ul.top-links>li>a {
padding:10px;
font-size:12px;
color: #5b5b5b;
display:block;
text-decoration:none;
}
#topBar ul.top-links>li>a:hover {
background-color:rgba(0,0,0,0.01);
}
#topBar ul.top-links>li>a>i {
margin-right:5px;
filter: alpha(opacity=30);
opacity:0.3;
}
@media only screen and (max-width: 768px) {
#topBar {
text-align:center;
}
#topBar ul.top-links {
display:inline-block;
float:none;
margin:0 auto;
}
#topBar ul.top-links>li:last-child>a {
border-right:0;
}
}
#topBar ul.top-links li.text-welcome {
padding:0 15px;
font-size:12px;
}
/* Drop Downs & Lang */
#topBar ul.dropdown-menu {
min-width:50px;
margin:0; padding:0;
margin-left:-1px;
}
#topBar ul.dropdown-menu>li>a {
padding:8px 6px;
font-size:12px;
}
#topBar ul.dropdown-langs>li>a {
padding:3px 6px;
font-size:12px;
}
#topBar ul.top-links>li>a>img.flag-lang {
float:left;
margin-top:3px;
margin-right:6px;
}
#topBar ul.dropdown-menu>li>a>i {
margin-right:6px;
}
#topBar ul.dropdown-langs>li:hover>a {
color:#5b5b5b !important;
background-color:#eee;
}
#topBar ul.dropdown-menu>li.divider {
margin:0; padding:0;
border-bottom:0;
height:1px;
}
/** Top Nav
**************************************************************** **/
#header {
position: relative;
left:0; top:0; right:0;
z-index:1000;
font-size:14px;
background-color:#fff;
border-bottom: rgba(0,0,0,0.05) 1px solid;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.1) !important;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.1) !important;
box-shadow: 0 0 2px rgba(0,0,0,.1) !important;
-webkit-transition: all .800s;
-moz-transition: all .800s;
-o-transition: all .800s;
transition: all .800s;
}
#header a.logo>img {
height:80px;
-webkit-transition: all .300s;
-moz-transition: all .300s;
-o-transition: all .300s;
transition: all .300s;
}
#header a.logo.logo-responsive>img {
height:100%; /* used on center - example: page-coming-soon-1.html */
}
/* force uppercase links */
#topBar ul li a,
#mainMenu ul li a,
#topMain ul li a {
text-transform:uppercase;
}
/* centered navigation */
#header .navbar-collapse.navbar-centered {
position: absolute;
left: 0;
right: 0;
text-align: center;
z-index: -1
}
#header .navbar-collapse.navbar-centered>.nav-main {
display: inline-block;
}
/* two logo images : light & dark */
#header a.logo>img:last-child {
display:none;
}
#header a.logo>img:first-child {
display:inline-block;
}
#header.fixed a.logo>img:first-child {
display:none;
}
#header.fixed a.logo>img:last-child {
display:inline-block;
}
/** Mobile Button
********************** **/
#topNav button.btn-mobile {
display:none;
}
#topNav button.btn-mobile {
color:#333;
display: none;
padding:6px 10px;
float:right;
margin-top:13px;
margin-right:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#topNav button.btn-mobile i {
padding:0; margin:0;
font-size:21px;
}
@media only screen and (max-width: 992px) {
#topNav button.btn-mobile {
display:inline-block;
}
}
/* remove bootstrap issue */
#topNav ul.dropdown-menu>li,
#topNav ul.dropdown-menu>li a {
background-color:transparent;
}
#topNav .nav-pills>li+li {
margin-left:0;
}
/* Sticky 60px */
#header.fixed {
position:fixed;
border-bottom:rgba(0,0,0,0.08) 1px solid;
}
#header.fixed #topNav a.logo {
height:60px;
line-height:50px;
}
#header.fixed #topNav a.logo>img {
height:60px;
}
#header.fixed #topNav #topMain>li>a {
height:60px;
line-height:40px;
}
/** ************************************************************* **/
/* submenu */
#topNav ul.dropdown-menu {
text-align:left;
margin-top: 0;
box-shadow:none;
border:#eee 1px solid;
border-top:#eee 1px solid;
list-style:none;
background:#fff;
background-color:#fff;
box-shadow:rgba(0,0,0,0.2) 0 6px 12px;
min-width:200px;
padding:0;
border-color: #1ABC9C #fff #fff;
-webkit-transition: top .4s ease;
-o-transition: top .4s ease;
transition: top .4s ease;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#topNav ul.dropdown-menu ul.dropdown-menu {
margin-top: -1px !important; /* -1px required for border-top menu */
}
#topNav ul.dropdown-menu li {
position:relative;
border-bottom: rgba(0,0,0,0.06) 1px solid;
}
/*
#topNav .submenu-dark ul.dropdown-menu li {
border-bottom-color: rgba(0,0,0,0.2);
}
*/
#topNav ul.dropdown-menu li:last-child {
border-bottom:0;
}
#topNav ul.dropdown-menu li a {
margin:0;
padding:7px 15px;
font-weight:400;
line-height:1.4empx;
color:#666;
font-size:12px;
display:block;
text-decoration:none;
}
#topNav ul.dropdown-menu>li a i {
margin-right:6px;
font-size:12px;
}
#topNav ul.dropdown-menu a.dropdown-toggle {
background-position: right center;
background-repeat: no-repeat;
}
#topNav ul.dropdown-menu li.active>a,
#topNav ul.dropdown-menu li.active:hover>a,
#topNav ul.dropdown-menu li.active:focus>a,
#topNav ul.dropdown-menu li:hover>a,
#topNav ul.dropdown-menu li:focus>a,
#topNav ul.dropdown-menu li:focus>a {
color:#000;
background-color:rgba(0,0,0,0.05);
}
#topNav ul.dropdown-menu li.divider {
margin:-1px 0 0 0;
padding:0; border:0;
background-color:rgba(0,0,0,0.1);
}
#topNav .nav li:hover>ul.dropdown-menu {
padding:0;
display:block;
z-index:100;
}
#topNav ul.dropdown-menu li .label {
margin-top:4px;
}
/* sub-submenu */
#topNav ul.dropdown-menu>li:hover > ul.dropdown-menu {
display:block;
position:absolute;
left:100%; top:0;
padding:0; margin:0;
border-left:0 !important;
border-right:0 !important;
border-bottom:0 !important;
}
/** ************************************************************* **/
/** Responsive Top Nav
********************* **/
@media only screen and (max-width: 992px) {
.navbar-collapse {
height:100%;
}
form.mobile-search {
display:block;
}
#topNav div.nav-main-collapse {
padding:0; margin:0;
}
#topNav button.btn-mobile {
display:block;
float:right;
margin-right:0;
}
#header.dark #topNav button.btn-mobile,
#header.transparent #topNav button.btn-mobile,
#header.theme-color #topNav button.btn-mobile {
color:#fff;
}
#topNav nav.nav-main {
background-color:#fff;
}
#topNav div.nav-main-collapse,
#topNav div.nav-main-collapse.in {
width: 100%;
margin:-1px 0 0 0;
}
#topNav div.nav-main-collapse {
float: none;
overflow-x:hidden;
max-height:350px;
}
/* ======================== MOBILE MENU V2 ===================== */
html.noscroll,
html.noscroll body {
overflow: hidden !important;
}
#header.fixed #topNav div.nav-main-collapse,
#topNav div.nav-main-collapse {
max-height:100% !important;
height:100%;
width: 100%;
position: fixed !important;
left:0 !important; right:0; bottom:0; top:0;
z-index:9999 !important;
overflow-y: scroll !important;
padding-top:58px !important;
margin:0 !important;
}
#topNav div.nav-main-collapse {
-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
-webkit-animation: fadeIn .3s !important;
animation: fadeIn .3s !important;
}
#header.fixed #topNav button.btn-mobile-active,
#topNav button.btn-mobile-active {
position: fixed !important;
z-index:999999 !important;
background-color: #232323 !important;
height: 60px !important;
top:0 !important;
width: 100%;
left:0; right:0;
margin: 0 !important;
opacity: 0.9;
}
#topNav button.btn-mobile-active>i {
float:right;
margin-right:10px;
margin-left:10px;
color: #fff !important;
font-size:30px;
}
#topNav button.btn-mobile-active>i:before {
content: "\f00d" !important;
}
#menu-overlay {
position: fixed;
top:0; bottom:0;
left:0; right:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index:10 !important;
}
/* dropdown background color */
#topMain,
#topNav ul.dropdown-menu {
color: #fff;
background-color: #333;
}
#topNav ul.dropdown-menu {
border: 0;
}
#topMain>li>a {
color: #fff !important;
}
#topNav ul.dropdown-menu li>a {
color: #fbfbfb !important;
}
#topMain>li>a,
#topNav ul.dropdown-menu li>a {
font-size:15px !important;
}
/* ====================== END MOBILE MENU V2 ==================== */
#topNav div.nav-main-collapse.collapse {
display: none !important;
}
#topNav div.nav-main-collapse.in {
display: block !important;
}
#topNav div.nav-main-collapse {
position: relative;
}
#topMain>li>a>span {
display:none !important;
}
#topMain li {
display:block !important;
float:none;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#topMain li a {
text-align:left;
border:0;
height:auto;
line-height:15px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#topMain>li:hover,
#topMain>li:hover>a {
border-top:0 !important;
}
#topMain>li>a {
height:auto;
line-height:auto;
}
/* submenu */
#topMain ul.dropdown-menu {
position: static;
clear: both;
float: none;
display: none !important;
border-left:0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topNav nav.nav-main li.resp-active > ul.dropdown-menu {
display: block !important;
margin-left:30px;
margin-right:30px;
padding:20px 0;
border-right:0;
}
#topNav nav.nav-main li.resp-active > ul.dropdown-menu li {
border-left:0;
}
#topNav ul.nav>li:hover>a:before,
#topNav ul.nav>li.active>a:before {
background-color:transparent;
}
#topNav ul.dropdown-menu>li:hover > ul.dropdown-menu {
position:static;
}
#topNav div.submenu-dark ul.dropdown-menu {
border-top:0;
}
/** sub menu */
#topNav nav.nav-main li.resp-active > ul.dropdown-menu {
margin:0; padding:0;
}
#topNav nav.nav-main li > ul.dropdown-menu li a {
padding-left:40px;
}
#topNav .dropdown-menu.pull-right,
#topNav .dropdown-menu.pull-left {
float:none !important;
}
}
@media only screen and (max-width: 500px) {
#topNav div.nav-main-collapse {
max-height:290px;
overflow-y:auto;
}
}
#topMain>li>a {
height:96px;
line-height:76px;
}
#topMain.nav-pills>li>a {
color:#1F262D;
font-weight:400;
background-color:transparent;
}
#topMain.nav-pills>li:hover>a,
#topMain.nav-pills>li:focus>a {
color:#1F262D;
background-color:rgba(0,0,0,0.03);
}
#topMain.nav-pills>li.active>a {
color:#687482;
}
#topMain.nav-pills>li>a.dropdown-toggle {
padding-right:25px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#topMain.nav-pills>li>a.dropdown-toggle:after {
display: block;
content: "\f107";
position: absolute;
top: 50%;
right: 10px;
margin: -5px 0 0;
font-family: FontAwesome;
font-size: 12px;
opacity: .3;
line-height: 1em;
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
}
#header.bottom.dropup #topMain.nav-pills>li>a.dropdown-toggle:after {
content: "\f106";
}
#topNav .navbar-collapse {
float:right;
}
#topNav a.logo {
height:96px;
line-height:96px;
overflow:hidden;
display:inline-block;
}
/* Mega Menu */
#topNav #topMain>li.mega-menu {
position: inherit;
color:#fff;
}
#topNav #topMain>li.mega-menu>ul {
max-width:100%;
width: 100%;
}
#topNav #topMain>li.mega-menu div.row {
display:table;
margin:0;
padding:0;
width:100%;
}
#topNav #topMain>li.mega-menu div.row div {
display:table-cell;
border-left: rgba(0,0,0,0.1) 1px solid;
margin-left: -1px;
display: table-cell;
vertical-align: top;
float: none;
margin:0;
padding:15px 0 0 0;
}
#topNav #topMain>li.mega-menu div.row>div:first-child {
border-left:0 !important;
}
#topNav #topMain>li.mega-menu div.row div>ul>li>span {
color:#111;
font-weight:bold;
display:block;
padding:6px 15px 15px 15px;
}
@media only screen and (max-width: 992px) {
#topNav #topMain>li.mega-menu div.row div>ul>li>span {
color:#fff;
}
}
#topNav #topMain>li.mega-menu div.row div:first-child {
border-left:0;
}
#topNav #topMain>li.mega-menu div.row div>ul>li+li>span {
margin-top:25px;
}
@media only screen and (max-width: 1215px) {
#topMain.nav-pills>li>a {
font-size:13px;
}
}
@media only screen and (max-width: 992px) {
/* Force 60px */
#header {
height:60px !important;
}
#header #topNav a.logo {
height:60px !important;
line-height:50px !important;
}
#header #topNav a.logo>img {
max-height:60px !important;
}
#header #topNav #topMain>li>a {
height:40px !important;
line-height:40px !important;
padding-top:0;
}
#topMain>li {
border-bottom:rgba(0,0,0,0.1) 1px solid;
}
#topMain>li:last-child {
border-bottom:0;
}
#topNav #topMain>li.mega-menu div.row div {
display:block !important;
border:0 !important;
}
}
/** Bootstrap 5 column equal grid
******************************** **/
.col-md-5th{
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 14%;
float: left;
}
@media (min-width: 992px) {
.col-md-5th {
width: 14%;
float: left;
}
}
@media only screen and (max-width: 992px) {
.col-md-5th {
width:100%;
float:none;
display:block;
}
.col-md-5th.col-sm-5th {
width: 20%;
float: left;
}
}
@media only screen and (max-width: 769px) {
.col-md-5th.col-sm-5th {
width:100%;
float:none;
display:block;
}
}
/* menu title */
#topNav #topMain li>h4 {
display: block;
padding: 10px 15px 10px 15px;
margin:0;
color: #111;
font-weight: 600;
font-size: 14px;
background-color: rgba(0,0,0,0.05);
}
#topNav ul.dropdown-menu li>h4 a {
display: inline-block;
padding: 3px 10px;
}
</style>
<div id="topBar" class="">
<div class="container">
<!-- right -->
<ul class="top-links list-inline pull-right">
<li class="text-welcome hidden-xs">Welcome to Smarty, <strong>John Doe</strong></li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><i class="fa fa-user hidden-xs"></i> MY ACCOUNT</a>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#"><i class="fa fa-history"></i> ORDER HISTORY</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-bookmark"></i> MY WISHLIST</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-edit"></i> MY REVIEWS</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-cog"></i> MY SETTINGS</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="glyphicon glyphicon-off"></i> LOGOUT</a></li>
</ul>
</li>
<li class="hidden-xs"><a href="page-login-1.html">LOGIN</a></li>
<li class="hidden-xs"><a href="page-register-1.html">REGISTER</a></li>
</ul>
<!-- left -->
<ul class="top-links list-inline">
<li class="hidden-xs"><a href="page-faq-1.html">FAQ</a></li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src="assets/images/_smarty/flags/us.png" width="16" height="11" alt="lang"> ENGLISH</a>
<ul class="dropdown-langs dropdown-menu">
<li><a tabindex="-1" href="#"><img class="flag-lang" src="assets/images/_smarty/flags/us.png" width="16" height="11" alt="lang"> ENGLISH</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><img class="flag-lang" src="assets/images/_smarty/flags/de.png" width="16" height="11" alt="lang"> GERMAN</a></li>
<li><a tabindex="-1" href="#"><img class="flag-lang" src="assets/images/_smarty/flags/ru.png" width="16" height="11" alt="lang"> RUSSIAN</a></li>
<li><a tabindex="-1" href="#"><img class="flag-lang" src="assets/images/_smarty/flags/it.png" width="16" height="11" alt="lang"> ITALIAN</a></li>
</ul>
</li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#">USD</a>
<ul class="dropdown-langs dropdown-menu">
<li><a tabindex="-1" href="#">USD</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">EUR</a></li>
<li><a tabindex="-1" href="#">GBP</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="header" class="sticky clearfix">
<!-- TOP NAV -->
<header id="topNav">
<div class="container">
<!-- Mobile Menu Button -->
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- BUTTONS -->
<ul class="pull-right nav nav-pills nav-second-main">
<!-- QUICK SHOP CART -->
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#">USD</a>
<ul class="dropdown-langs dropdown-menu">
<li><a tabindex="-1" href="#">USD</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">EUR</a></li>
<li><a tabindex="-1" href="#">GBP</a></li>
</ul>
</li>
</ul>
<!-- /BUTTONS -->
<!-- Logo -->
<a class="logo pull-right" href="/">
<img src="{{ asset('images/wlogo.png') }}" alt="Stern Tours">
</a>
<!--
Top Nav
AVAILABLE CLASSES:
submenu-dark = dark sub menu
-->
<div class="navbar-collapse pull-left nav-main-collapse collapse">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown active"><!-- HOME -->
<a class="dropdown-toggle" href="#">
Kulturreisen
</a>
<ul class="dropdown-menu">
<li role="menuitem" itemprop="name">
<a href="/" title="Usedom Ferienwohnungen" itemprop="">
Kulturreisen
</a>
</li>
</ul>
</li>
<li class="dropdown mega-menu"><!-- PORTFOLIO -->
<a class="dropdown-toggle" href="#">
<i class="fa fa-star"></i> Reiseländer
</a>
<ul class="dropdown-menu">
<li>
<div class="row">
{% for nav_page in nav_pages if nav_page.country is not empty %}
{# @var nav_page \AppBundle\Entity\Page #}
<div class="col-md-7th">
<ul class="list-unstyled">
<li>
<h4><i class="fa fa-star"></i><a href="{{ nav_page.urlPath }}" title="{{ nav_page.title }}">
{{ nav_page.title|replace({'Reisen': ''}) }}<span class="hidden-md hidden-sm">Reisen</span>
</a></h4>
</li>
{% for childnav_page in nav_page.children %}
{# @var childnav_page \AppBundle\Entity\Page #}
<li role="menuitem" itemprop="name">
<a itemprop="url" href="{{ childnav_page.urlPath }}" title="{{ childnav_page.title }}">
{{ childnav_page.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</li>
</ul>
</li>
<li class="dropdown"><!-- HOME -->
<a class="dropdown-toggle" href="#">
Ferienwohnungen
</a>
<ul class="dropdown-menu">
<li role="menuitem" itemprop="name">
<a href="/ferienwohnungen" title="Usedom Ferienwohnungen" itemprop="">
Usedom Ferienwohnungen
</a>
</li>
</ul>
</li>
<li class="dropdown"><!-- BLOG and SHOP -->
<a class="dropdown-toggle" href="#">
Reise-Extras
</a>
<ul class="dropdown-menu">
<li role="menuitem" itemprop="name">
<a itemprop="url" href="/jugendreisen" title="Jugendreisen">
Jugendreisen
</a>
</li>
<li role="menuitem" itemprop="name">
<a itemprop="url" href="/reiseversicherung" title="Reiseversicherung">
Reiseversicherung
</a>
</li>
<li role="menuitem" itemprop="name">
<a itemprop="url" href="/reisefuehrer" title="Reiseführer">
Reiseführer
</a>
</li>
<li role="menuitem" itemprop="name">
<a itemprop="url" href="/reisemagazin" title="Reisemagazin">
Reisemagazin
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
</div>