responsive
This commit is contained in:
parent
00b31edd81
commit
5a582da417
|
|
@ -17,7 +17,7 @@ class ComposerServiceProvider extends ServiceProvider
|
||||||
public function boot()
|
public function boot()
|
||||||
{
|
{
|
||||||
//using the class based composers...
|
//using the class based composers...
|
||||||
View::composer(['shop::layouts.header.index', 'shop::layouts.footer'], 'Webkul\Shop\Http\ViewComposers\Categories\CategoryComposer');
|
View::composer(['shop::layouts.header.index', 'shop::layouts.footer','shop::layouts.master'], 'Webkul\Shop\Http\ViewComposers\Categories\CategoryComposer');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -344,6 +344,15 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-responsive {
|
||||||
|
position: fixed;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
background:white;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
// header page responsive css start here
|
// header page responsive css start here
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -145,6 +145,7 @@
|
||||||
var search = document.getElementById("search");
|
var search = document.getElementById("search");
|
||||||
var searchSuggestion = document.getElementsByClassName('search-suggestion')[0];
|
var searchSuggestion = document.getElementsByClassName('search-suggestion')[0];
|
||||||
var headerBottom = document.getElementsByClassName('header-bottom')[0];
|
var headerBottom = document.getElementsByClassName('header-bottom')[0];
|
||||||
|
var nav= document.getElementsByClassName('nav-responsive')[0];
|
||||||
|
|
||||||
search.addEventListener("click", header);
|
search.addEventListener("click", header);
|
||||||
hamMenu.addEventListener("click", header);
|
hamMenu.addEventListener("click", header);
|
||||||
|
|
@ -167,11 +168,12 @@
|
||||||
search.classList.add("cross-icon");
|
search.classList.add("cross-icon");
|
||||||
searchSuggestion.style.display = 'block';
|
searchSuggestion.style.display = 'block';
|
||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
|
nav.style.display = 'none';
|
||||||
}else if(className === 'icon sortable-icon'){
|
}else if(className === 'icon sortable-icon'){
|
||||||
hamMenu.classList.remove("sortable-icon");
|
hamMenu.classList.remove("sortable-icon");
|
||||||
hamMenu.classList.add("cross-icon");
|
hamMenu.classList.add("cross-icon");
|
||||||
|
searchSuggestion.style.display = 'none';
|
||||||
headerBottom.style.display = 'block';
|
nav.style.display = 'block';
|
||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
}else{
|
}else{
|
||||||
search.classList.remove("cross-icon");
|
search.classList.remove("cross-icon");
|
||||||
|
|
@ -179,6 +181,7 @@
|
||||||
hamMenu.classList.remove("cross-icon");
|
hamMenu.classList.remove("cross-icon");
|
||||||
hamMenu.classList.add("sortable-icon");
|
hamMenu.classList.add("sortable-icon");
|
||||||
searchSuggestion.style.display = 'none';
|
searchSuggestion.style.display = 'none';
|
||||||
|
nav.style.display = 'none';
|
||||||
document.body.style.overflow = "scroll";
|
document.body.style.overflow = "scroll";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,10 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-responsive">
|
||||||
|
@include('shop::layouts.header.nav-menu.navmenu')
|
||||||
|
</div>
|
||||||
|
|
||||||
@include('shop::layouts.footer')
|
@include('shop::layouts.footer')
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -473,6 +473,16 @@ body {
|
||||||
margin-left: 52px;
|
margin-left: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-responsive {
|
||||||
|
position: fixed;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
background: white;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 770px) {
|
@media only screen and (max-width: 770px) {
|
||||||
.header .header-top div.left-content ul.search-container li.search-group {
|
.header .header-top div.left-content ul.search-container li.search-group {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue