Home Forums Pro Themes Food Restro Pro Always user hamburger/mobile menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #155143
    koffie
    Participant

    I’ve tried several custom CSS snippets, but can’t seem to get it working for the Food Resto theme. I want to use the mobile/hamburger always even on desktop.
    Anoyone knows what I have to use for custom CSS to do this? Thanks.

    #155165
    Psink
    Keymaster

    @KOFFIE, You can try this CSS

    
    .menu-toggle {
    	height: 90px;
    }
    .site-logo img {
        max-height: 60px;
    }
    .site-branding {
    	padding: 15px 0;
    	min-height: 80px;
    }
    .site-title {
    	font-size: 26px;
    }
    .main-navigation a {
        border-bottom: 1px solid #eee;
    }
    .main-navigation ul.nav-menu > li {
    	padding: 0;
    }
    .main-navigation ul.nav-menu > li > a {
    	padding: 15px;
    }
    .main-navigation ul.sub-menu li a {
    	padding-top: 15px;
    	padding-bottom: 15px;
    }
    .main-navigation ul ul a {
        width: 100%;
    }
    .main-navigation ul#primary-menu li.current-menu-item > a,
    .main-navigation ul#primary-menu li:hover > a,
    .main-navigation ul#primary-menu li:focus > a,
    .main-navigation ul.nav-menu > li > a {
    	color: #2A3235;
    }
    .main-navigation ul ul,
    .main-navigation ul ul ul {
        box-shadow: none;
        float: none;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0;
        display: none;
    }
    .main-navigation ul.sub-menu li {
        padding-right: 0;
    }
    .main-navigation .menu-item-has-children > a:before {
        content: "";
        float: right;
        position: relative;
        right: 25px;
        background-color: #ccc;
        width: 1px;
        height: 25px;
    }
    .main-navigation .menu-item-has-children > a:after {
        padding-top: 3px;
    }
    .main-navigation ul.nav-menu > li > a,
    .main-navigation ul.sub-menu li a {
        padding: 15px 15px 15px 25px;
    }
    .main-navigation ul.sub-menu li a {
    	padding-left: 50px;
    }
    .main-navigation ul.sub-menu ul li a {
    	padding-left: 75px;
    }
    .main-navigation ul.sub-menu ul ul li a {
    	padding-left: 100px;
    }
    .main-navigation ul.sub-menu ul ul ul li a {
    	padding-left: 125px;
    }
    .main-navigation .menu-item-has-children a svg {
    	display: none;
    }
    .main-navigation ul.sub-menu li a {
    	border-left: none;
    }
    .main-navigation ul.nav-menu {
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
    }
    .main-navigation {
    	position: static;
    }
    .main-navigation a {
    	color: #1C2B42;
    }
    .main-navigation svg.icon-search,
    .main-navigation svg.icon-down {
    	fill: #1C2B42;
        margin-top: -5px;
    }
    .main-navigation ul.sub-menu {
    	border: none;
    }
    .menu-open .menu-toggle .icon-close {
    	display: block;
    	fill: #fff;
    	margin: auto;
    	width: 20px;
    	height: 20px;
    }
    #masthead.site-header .main-navigation ul.nav-menu {
        margin-top: 0;
        position: absolute;
        max-width: 400px;
        top: 100%;
        left: auto;
        right: 0;
        width: 100%;
        border-top: 1px solid #eee;
    }
    .main-navigation .search-menu a {
        display: none;
    }
    .main-navigation form.search-form input {
        background-color: #fff;
        border: none;
        min-height: 55px;
    }
    .main-navigation form.search-form button.search-submit {
    	height: 59px;
    }
    .menu-open #search {
        display: block !important;
    }
    .main-navigation form.search-form input {
    	padding-left: 25px;
    }
    .main-navigation .sub-menu svg {
    	-webkit-transform: rotate(0);
    	-moz-transform: rotate(0);
    	-ms-transform: rotate(0);
    	-o-transform: rotate(0);
    	transform: rotate(0);
    }
    #site-navigation ul ul {
    	background-color: transparent;
    }
    .main-navigation li,
    button.dropdown-toggle,
    .menu-toggle {
        display: block;
    }
    .main-navigation ul.nav-menu > li:not(:last-child):after {
        display: none;
    }
    .main-navigation ul.nav-menu {
    	display: none !important;
    }
    .menu-open.main-navigation ul.nav-menu {
    	display: block !important;
    }
    .main-navigation ul.nav-menu > li:not(:last-child) {
        margin-right: 0;
    }
    .menu-sticky #masthead.nav-shrink .main-navigation ul.nav-menu > li > a {
    	padding: 15px 15px 15px 25px;
    }
    .main-navigation ul ul {
        opacity: 1;
        visibility: visible;
    }
    .main-navigation ul.sub-menu li a {
        color: #000;
    }
    .main-navigation ul.nav-menu li.menu-item-has-children:hover ul.sub-menu li a {
        padding: 15px 15px 15px 50px;
    }
    .main-navigation ul.sub-menu > li:last-child > a {
        border-bottom: 1px solid #eee;
    }
    .main-navigation form.search-form {
        border: none;
    }
    #search:before {
        display: none;
    }
    #search {
        position: relative;
        top: 0;
    }
    #masthead .main-navigation a:hover,
    #masthead .main-navigation ul.nav-menu > li > a:hover,
    #masthead .main-navigation ul.nav-menu li.current-menu-item > a {
        color: #A90125;
    }
    

    Regards

    #155174
    koffie
    Participant

    Thanks, that’s working for me.

    #156752
    martinlloyd
    Participant

    My burger menu has turned into a box with a X through it. Can anyone help me with this? very annoying for mobile visitors. Please help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.