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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 1, 2021 at 7:30 am #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.

    August 2, 2021 at 12:09 am #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

    August 2, 2021 at 6:04 am #155174
    koffie
    Participant

    Thanks, that’s working for me.

    September 2, 2021 at 8:04 am #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.

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