![\"\"](\"https:\/\/www.graphicz.co.uk\/blog\/wp-content\/uploads\/2020\/01\/Screenshot_20200106-094510.jpg\")
<\/figure>\n\n\n\n\nAdd the class ‘overeight’ to the quicksearch div: \nReplace the Mini Nav layout with this: \nSee it working here: The standard mobile menu in Sellerdeck is the word CATEGORIES with a +\/- Here I show you how to convert the standard Sellerdeck mobile menu to a ‘Hamburger’. You can easily change to the universally acceptable ‘Hamburger’ menu using the…<\/span> <\/p>\n <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-424","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/424"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":4,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/424\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/424\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can easily change to the universally acceptable ‘Hamburger’ menu using the scripting from W3C at: https:\/\/www.w3schools.com\/howto\/howto_css_menu_icon.asp<\/a>
1. Copy and paste these styles into the very bottom of the current stylesheet:
Code: <\/p>\n\n\n\n\/* Hamburger *\/\n.burgerbun {\n display: inline-block;\n cursor: pointer;\n margin-top: 1.8em;\n margin-left: .5em;\n}\n\n.bar1, .bar2, .bar3 {\n width: 35px;\n height: 3px;\n background-color: #222222;\n margin: 6px 0;\n transition: 0.4s;\n}\n\n.change .bar1 {\n -webkit-transform: rotate(-45deg) translate(-5px, 5px);\n transform: rotate(-45deg) translate(-5px, 5px);\n}\n\n.change .bar2 {opacity: 0;}\n\n.change .bar3 {\n -webkit-transform: rotate(45deg) translate(-8px, -8px);\n transform: rotate(45deg) translate(-8px, -8px);\n}\n@media (min-width:801px) {\n.undereight {display:none;}\n.overeight {display:inherit;}\n}\n@media (max-width:800px) {\n.overeight {display:none;}\n.undereight {display:inherit;}\ndiv.quick-search {\n float: right;\n max-width: 80%;\n margin-right: 8px;\n}\n.quick-search input[type=\"submit\"], .quick-search input[type=\"submit\"]:hover {\n margin: .5em;\n}\n.quick-search input[type=\"text\"] {\n float: right;\n margin: 0.5em 0 0 0;\n padding: 0.3em;\n margin-right: 1em;\n}\n.quick-search form span.quick-search-button-wrapper {\n margin: 0;\n padding: 0;\n position: absolute;\n top: 1.3em;\n right: 2.7em;\n}\n.navigation-bar {\n border:1px solid #cccccc;\n box-shadow:inset 0px 0px 0px 1px #ffffff;\n background: #efefef; \/* Old browsers *\/\n \/* IE9 SVG, needs conditional override of 'filter' to 'none' *\/\n background:url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA\/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZmRmZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);\n background:-moz-linear-gradient(top, <actinic:variable name=\"CheckoutBG\" \/> 0%, <actinic:variable name=\"PaletteBG\" \/> 100%); \/* FF3.6+ *\/\n background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,<actinic:variable name=\"CheckoutBG\" \/>), color-stop(100%,<actinic:variable name=\"PaletteBG\" \/>)); \/* Chrome,Safari4+ *\/\n background:-webkit-linear-gradient(top, <actinic:variable name=\"CheckoutBG\" \/> 0%,<actinic:variable name=\"PaletteBG\" \/> 100%); \/* Chrome10+,Safari5.1+ *\/\n background:-o-linear-gradient(top, <actinic:variable name=\"CheckoutBG\" \/> 0%,<actinic:variable name=\"PaletteBG\" \/> 100%); \/* Opera 11.10+ *\/\n background:-ms-linear-gradient(top, <actinic:variable name=\"CheckoutBG\" \/> 0%,<actinic:variable name=\"PaletteBG\" \/> 100%); \/* IE10+ *\/\n background:linear-gradient(to bottom, <actinic:variable name=\"CheckoutBG\" \/> 0%,<actinic:variable name=\"PaletteBG\" \/> 100%); \/* W3C *\/\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<actinic:variable name=\"CheckoutBG\" \/>', endColorstr='<actinic:variable name=\"PaletteBG\" \/>',GradientType=0 ); \/* IE6-8 *\/\n}\n#mega-menu {\n background: #fff;\n}\n}<\/pre>\n\n\n\n
\n\n\t\n\t\n\t\n\n\n\tCode:\n\t<\/p>\n\n\n\n<div class=\"quick-search overeight\">\n<form name=\"simplesearch\" method=\"get\" action=\"<actinic:variable name=\"OnlineScriptURL\" value=\"Search Script URL\" \/>\"> etc etc etc<\/pre>\n\n\n\n
\n\n\t\n\t\n\t\n\n\n\tCode:\n\t<\/p>\n\n\n\n<div class=\"miniNav\">\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz4%5fSectionPageList%22%20%2f%3e%20%3d%3d%20%22Main%20Menu%20Bar%22%20OR%20%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Main%20Menu%20Bar%22\" >\n <!--<p class=\"mainNav\">Categories<a id=\"mainNav\" href=\"#menu\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <p class=\"mainNav\">Categories<a id=\"mainNav\" href=\"#menu\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>-->\n <nav class=\"mobile-nav\" role=\"navigation\">\n <a class=\"burgerbun\" onclick=\"myBurger(this)\" id=\"mainNav\">\n <div class=\"bar1\"><\/div>\n <div class=\"bar2\"><\/div>\n <div class=\"bar3\"><\/div>\n <\/a>\n \n<div class=\"quick-search\">\n<form name=\"simplesearch\" method=\"get\" action=\"<actinic:variable name=\"OnlineScriptURL\" value=\"Search Script URL\" \/>\">\n\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e\">\n <!-- Hidden field when in trial mode -->\n <input type=\"hidden\" name=\"SHOP\" value=\"<Actinic:Variable Name=\"HiddenFields\"\/>\" \/>\n <\/actinic:block>\n\n <input type=\"hidden\" name=\"page\" value=\"search\" \/>\n <input type=\"text\" name=\"SS\" size=\"18\" value=\"Quick Search\" onfocus=\"this.value='';\" class=\"quick-search-text\" \/> \n <input type=\"hidden\" name=\"PR\" value=\"-1\" \/>\n <input type=\"hidden\" name=\"TB\" value=\"O\" \/>\n <span class=\"button-wrapper quick-search-button-wrapper\">\n <input class=\"button quick-search-button\" type=\"submit\" name=\"ACTION\" value=\"<actinic:variable name=\"QuickSearchButtonText\" \/>\" \/>\n <\/span>\n\n<\/form>\n<\/div> \n \n <\/nav>\n<script>\nfunction myBurger(x) {\n x.classList.toggle(\"change\");\n}\n<\/script>\n\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22MobileLeftColumn%22%20%2f%3e%20%3d%3d%20%22Before%20Main%20Content%22\">\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz6%5fQuickSearch%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22\">\n <p class=\"quickSearchTitle\">Quick Search<a id=\"quickSearchTitle\" href=\"#quickSearchLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz7%5fCartFunctions%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22\">\n <p class=\"shoppingCartSummaryTitle\">Cart Summary<a id=\"shoppingCartSummaryTitle\" href=\"#shoppingCartSummaryLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block> \n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22LEFTBARTITLE%22%20%2f%3e%20%21%3d%20%22%22%20%20OR%20%0d%3cactinic%3avariable%20name%3d%22LEFTBARTEXT%22%20%2f%3e%20%21%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22Wiz4_SectionPageList%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22%20OR%0d%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22\" >\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22LEFTBARTITLE%22%20%2f%3e%20%21%3d%20%22%22%20%20OR%20%0d%3cactinic%3avariable%20name%3d%22LEFTBARTEXT%22%20%2f%3e%20%21%3d%20%22%22\" >\n <p class=\"infoBoxTitle\"><actinic:variable formatting=\"h2\" name=\"LEFTBARTITLE\" \/><a id=\"infoBoxTitle\" href=\"#infoBox\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz4_SectionPageList%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22\" >\n <p class=\"storeSectionsTitle\">Store Sections<a id=\"storeSectionsTitle\" href=\"#storeSections\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22\" >\n <p class=\"informationTitle\">Information<a id=\"informationTitle\" href=\"#information\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz9%5fBestSellers%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22%20AND%0d%3cactinic%3avariable%20name%3d%22BestsellersListIsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22BestSellerListLocation%22%20%2f%3e%20%21%3d%20%22Home%20Page%20Only%22\" >\n <p class=\"bestSellerTitle\">Best Sellers<a id=\"bestSellerTitle\" href=\"#bestSellerLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22Wiz8%5fNewProducts%22%20%2f%3e%20%3d%3d%20%22Left%20Side%22%20AND%0d%3cactinic%3avariable%20name%3d%22NewProductsListIsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22NewProductsListLocation%22%20%2f%3e%20%21%3d%20%22Home%20Page%20Only%22\" >\n <p class=\"newProductTitle\">New Products<a id=\"newProductTitle\" href=\"#newProductLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22CaptureCoupon%22%20%2f%3e\" >\n <p class=\"couponFieldTitle\">Coupon<a id=\"couponFieldTitle\" href=\"#couponFieldLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <\/actinic:block>\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22\" >\n <actinic:block if=\"%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e\">\n <p class=\"productFiltersTitle\">Filter<a id=\"productFiltersTitle\" href=\"#productFiltersLeft\" onclick=\"$(this).text($(this).text() == '-' ? '+' : '-');\">+<\/a><\/p>\n <\/actinic:block>\n <\/actinic:block>\n<\/div><\/pre>\n\n\n\n
http:\/\/www.graphicz.solutions\/hamburger\/<\/a>
\nThank you\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"