responsive

This commit is contained in:
rahul shukla 2018-10-01 13:19:04 +05:30
parent 00b31edd81
commit 5a582da417
5 changed files with 29 additions and 3 deletions

View File

@ -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');
} }
/** /**

View File

@ -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

View File

@ -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";
} }

View File

@ -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>

View File

@ -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;